CSS3炫酷鼠标滑过卡片3D翻转特效

这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时，图片被在3D空间中倾斜，当顶部滑过图片的时候，卡片平滑过渡到正常位置，卡片上的图片被缩小，同时显示出说明文字和一些链接图标。

制作方法

HTML结构

该3D卡片翻转特效的HTML结构使用HTML5 <figure>元素，卡片的文字说明和链接图标使用<figcaption>元素来制作。

<figure id="img-wrapper">
    <img src="img/1.jpg" alt="Preview Image">
    <figcaption>
        <h2 class="title">Hover Design Interaction</h2>
        <div class="bottom-detail">
            <p>......</p>
            <ul class="social-icons">
                <li><a class="fa fa-qq" href="#"></a></li>
                <li><a class="fa fa-weibo" href="#"></a></li>
                <li><a class="fa fa-weixin" href="#"></a></li>
                <li><a class="fa fa-renren" href="#"></a></li>
            </ul>
        </div>
    </figcaption>
</figure>
              

CSS样式

首先整个包裹元素#tri-d-wrapper被使用perspective制作为3D空间。

#tri-d-wrapper {
      -webkit-perspective: 300px;
      perspective: 300px;
      position: absolute;
      height: 100%;
      width: 100%;
  }               
              

接下来<figure>元素被绝对定位到屏幕中间，并设置了一些阴影效果。同时使用rotateX和scale将它沿X轴旋转并缩小。为了制作平滑的过渡效果，添加了transition属性。

#img-wrapper {
    width: 350px;
    background: #3498db;
    margin: 0;
    position: absolute;
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
    top: 40%;
    left: 50%;
    margin-left: -175px;
    margin-top: -131px;
    -webkit-transform: rotateX(30deg) scale(.65);
    transform: rotateX(30deg) scale(.65);
    -webkit-transition: .3s all ease;
    transition: .3s all ease;
    box-shadow: 0 15px 20px 5px rgba(0,0,0,.2);
}                
              

在鼠标滑过<figure>元素的时候，rotateX被置回0度，并且scale被重置为1。

#img-wrapper:hover {
    -webkit-transform: rotateX(0deg) scale(1);
    transform: rotateX(0deg) scale(1);
    box-shadow: none;
}                
              

以上是鼠标滑过卡片是的3D翻转效果，其他的效果实现方法比较简单，请参考下载的源文件。