当前位置主页 > 资料库 > 前端教程 > CSS3带动态阴影效果的3D图片翻转特效

CSS3带动态阴影效果的3D图片翻转特效

03-08

查看演示 下载地址

在前不久我们讲解了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>                          
                            

注意:每一个包裹<figure><div>将用于插件3D空间。

为了制作最终的3D翻转效果,我们需要注意以下几点:

  • 每一个figcaption都要设置为和响应式图片一样的大小。
  • 图片标题反向放置,放置在图片的背面。
  • 创建一个和图片一起运动的dropshadow,不用添加额外的代码。
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;
}                             
                            

在demo中还通过@media来设置对小屏幕的支持,你可以在demo中缩放浏览器来看看效果。

图片标题的位置

图片的标题使用position: absolute放置在图片上面(前面已经将<figure>元素设置为position: relative),然后通过rotatetranslate将图片标题放到图片的背面去,达到这种效果的前提是<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;
}                             
                            

图片标题的垂直居中放置使用了一些小技巧,并为它提供一个半透明的背景。你也可以设置figcaption为完全不透明的背景,就像一张明信片的效果。

3D翻转效果

现在在鼠标滑过时添加卡片的3D翻转效果:

div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }                              
                            
添加阴影效果

我们使用一个径向渐变来制作阴影效果:

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%);
}                              
                            

所得到的效果如下图所示:

图片阴影效果

到此这个效果就完成了,希望对你有所帮助。

查看演示 下载地址

Previous:
上一篇:HTML5超酷名片盒风格3D翻页图片画廊
Next:
下一篇:使用纯CSS制作Pinterest样式的瀑布流图片列布局
返回顶部