CSS3超酷图片3D旋转显示图片信息特效

这是一款使用CSS3 3D Transform制作的超酷图片3D旋转显示图片标题信息特效。这个特效开始的时候只有图片是可见的，图片标题信息被隐藏起来。当用鼠标滑过图片时，图片会在垂直方向上做3D旋转，就像一个立方体向上旋转一样，底部的图片标题信息被显示出来。如下图：

这个特效中使用了两个面，一个是front面，一个是bottom面。front面一幅图片，bottom面是图片的信息。bottom面通过旋转X轴-90度来隐藏它，并修改translateZ的值使它在front面的下面：

有两个元素包裹着这两个面，最外层是class为wrapper的div，它被用于设置perspective。第二个是class为item的内层div，它的作用是在鼠标滑过时沿X轴旋转95度显示图片标题信息并隐藏图片。

HTML结构

HTML结构正如上面分析的一样：

<div class="wrapper">  
  <div class="item">  
    <img src="images/contact.png">  
    <span class="information">  
      <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
    </span>  
  </div>  
</div>  
  
<!-- to n wrapper -->  
                

CSS样式

每一个wrapper都要设置为inline-block的显示方式，并且透视值 perspective 为4000像素。item的transform-style值为preserve-3d，这样可以使它的子元素保存3D定位。同时还要添加一个transition来使鼠标滑过动画平滑过渡。

.wrapper {  
  display: inline-block;  
  width: 310px;  
  height: 100px;  
  vertical-align: top;  
  margin: 1em 1.5em 2em 0;  
  cursor: pointer;  
  position: relative;  
  font-family: Tahoma, Arial;  
  perspective: 4000px;  
}  
  
.item {  
  height: 100px;  
  transform-style: preserve-3d;  
  transition: transform .6s;  
}  
                

图片和图片标题信息也需要transition，因为当鼠标滑过时，它们需要改变border-radius和box-shadow的值。这些效果都需要平滑过渡一下。

.item img {  
  display: block;  
  position: absolute;  
  top: 0;  
  border-radius: 3px;  
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
  transform: translateZ(50px);  
  transition: all .6s;  
    
}  
  
.item .information {  
  display: block;  
  position: absolute;  
  top: 0;  
  height: 80px;  
  width: 290px;  
  text-align: left;  
  border-radius: 15px;  
  padding: 10px;  
  font-size: 12px;  
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);  
  box-shadow: none;  
  background: linear-gradient(to bottombottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);  
  transform: rotateX(-90deg) translateZ(50px);  
  transition: all .6s;  
    
} 
                

最后，当鼠标滑过图片时，item元素被旋转，并改变图片和图片标题信息的border-radius和box-shadow。

.item:hover {  
  transform: translateZ(-50px) rotateX(95deg);  
}  
  
.item:hover img {  
    box-shadow: none;  
    border-radius: 15px;  
}  
    
.item:hover .information {  
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
    border-radius: 3px;  
} 
                

到此这个图片3D旋转显示图片标题信息特效就完成了!这个特效只在支持CSS3 3D transform的浏览器中工作。插件中使用modernizr来检测浏览器的这个特性。

下面是一个预览图，希望你喜欢它！