html5图片自动翻转特效,css3带动态阴影效果的3d图片翻转特效 -凯发k8官方网
在前不久我们讲解了css3 3d卡片翻转技术，在这篇文章中，我们要跟进一步，在卡片3d翻转的基础上，制作卡片的动态阴影效果。最终效果是鼠标滑过图片时，卡片会3d翻转，图片的背面显示图片的标题，在图片的顶部时图片的阴影，阴影也会随图片一起3d翻转。
html结构
这个css3 3d卡片翻转特效的html结构很简单。
mouseirrigation ratsrabbit注意：每一个包裹
的将用于插件3d空间。为了制作最终的3d翻转效果，我们需要注意以下几点：
每一个figcaption都要设置为和响应式图片一样的大小。
图片标题反向放置，放置在图片的背面。
创建一个和图片一起运动的dropshadow，不用添加额外的代码。
css样式
首先，我们需要在3d空间中操纵
元素，我们通过在其父元素上设置perspective来达到这个效果(注意代码中没有使用浏览器厂商的前缀)：div.flip-3d {perspective: 1200px; width: 30%; float: left;}
接下来，将
元素中的图片设置为响应式的，为了使元素尽可能的有效，这里只跟踪元素的transformation。同时不要忘记设置transform-style。div.flip-3d figure {
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
}
div.flip-3d figure img {
width: 100%; height: auto;
}
在demo中还通过@media来设置对小屏幕的支持，你可以在demo中缩放浏览器来看看效果。
图片标题的位置
图片的标题使用position: absolute放置在图片上面(前面已经将
元素设置为position: relative)，然后通过rotate和translate将图片标题放到图片的背面去，达到这种效果的前提是元素设置了正确的transform-style。div.flip-3d figure figcaption {
position: absolute;
width: 100%; height: 100%; top: 0;
transform: rotatey(.5turn) translatez(1px);
background: rgba(255,255,255,0.9);
text-align: center;
padding-top: 45%;
opacity: 0.6;
transition: 1s .5s opacity;
}
图片标题的垂直居中放置使用了一些小技巧，并为它提供一个半透明的背景。你也可以设置figcaption为完全不透明的背景，就像一张明信片的效果。
3d翻转效果
现在在鼠标滑过时添加卡片的3d翻转效果：
div.flip-3d:hover figure { transform: rotatey(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
为什么不直接在figure元素上设置:hover？
在每个figure元素上包裹一个div视乎显得有些多余，为什么不直接在figure元素上设置:hover伪元素呢？
原因是figure元素在翻转的时候，它的活动区域会逐渐变小，有时候浏览器不知道鼠标是在figure元素之内还是之外，造成一些解析上的错误。
添加阴影效果
我们使用一个径向渐变来制作阴影效果：
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotatex(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
所得到的效果如下图所示：
到此这个效果就完成了，希望对你有所帮助。
与50位技术专家面对面20年技术见证，附赠技术全景图总结
以上是凯发k8官方网为你收集整理的html5图片自动翻转特效,css3带动态阴影效果的3d图片翻转特效的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：