在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果。最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的顶部时图片的阴影,阴影也会随图片一起3D翻转。
最终效果点这里查看。
HTML结构
这个CSS3 3D卡片翻转特效的HTML结构很简单。
<div class="flip-3d">
<figure>
<img src="1.jpg" alt="">
<figcaption>Mouse</figcaption>
</figure>
</div>
<div class="flip-3d">
<figure>
<img src="2.jpg" alt="">
<figcaption>Irrigation rats</figcaption>
</figure>
</div>
<div class="flip-3d">
<figure>
<img src="3.jpg" alt="">
<figcaption>Rabbit</figcaption>
</figure>
</div>
CSS样式
首先,我们需要在3D空间中操纵<figure>元素,我们通过在其父元素上设置perspective来达到这个效果(注意代码中没有使用浏览器厂商的前缀):
div.flip-3d {perspective: 1200px; width: 30%; float: left;}
接下来,将<figure>元素中的图片设置为响应式的,为了使<figure>元素尽可能的有效,这里只跟踪元素的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;
}
图片标题的位置
图片的标题使用position: absolute放置在图片上面(前面已经将<figure>元素设置为position: relative),然后通过rotate和translate将图片标题放到图片的背面去,达到这种效果的前提是<figure>元素设置了正确的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;
}
添加阴影效果
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%);
}
最后所得到的效果如下图所示: