鼠标移动3D翻转动画特效

好久没有更新文章咯，今天我为大家带来一个酷炫的3D翻转特效效果例子（该效果是用的纯html+css3实现的哦）

特别指示：

1、用到咯;perspective

a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

2、transform-style  该属性也是3D效果中经常使用的，其两个参数，

flat|preserve-3d

.
前者

flat

为默认值，

        表示平面的；后者

preserve-3d

表示3D透视。

    3、transform:  这个里面有很多的变形样式设置，这里我是用rotateY  ，你也可用rotateX或者其他的属性
别的废话就不多说咯，不懂的请看下面的代码：
html代码：

<div class="box">
<ul>
<li>
<div class="box_img"><img src="images/1.png" alt="" /></div>
<div class="box_content">
<h4 class="title">Duende</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
</div>
</li>
<!-- 2 -->
<li>
<div class="box_img"><img src="images/2.png" alt="" /></div>
<div class="box_content rotate_90">
<h4 class="title">Duende</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
</div>
</li>
<!-- 3 -->
<li>
<div class="box_img"><img src="images/3.png" alt="" /></div>
<div class="box_content">
<h4 class="title">Duende</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
</div>
</li>
</ul>
</div>

css代码：

*{margin:0; padding:0;}
ul,li{ list-style: none;}
body{ font-family: 'Microsoft Yahei';}
.box{ width: 1000px; height: 310px; margin:0 auto ;}
.box li{ width: 300px; height: 300px; position: relative; float: left;
margin-left: 20px; margin-top:4px;perspective: 1000px;}
.box li .box_img,.box li .box_content{ width: 300px; height: 300px; position: absolute; top:0; left: 0; text-align: center;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box .title{font-size: 20px; margin-top: 12%; line-height: 50px; color: #fff;text-transform: uppercase;}
.box .description{ font-size: 14px;line-height: 24px;color: #fff;}
.box .title:after,
.box .description:after{content: "";width: 80%;display: block;border-bottom: 1px solid #fff;margin: 15px auto;}
/*转动的样式设置*/
.box li .box_content{ background: #333; opacity: .9;transform:rotateY(90deg); }
.box li:hover .box_content{transform:rotateY(0deg); }
.box li:hover .box_img{transform:rotateY(-90deg); }

这是用的rotateY做的，你也可以试一下其他的属性。