鼠标移动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做的，你也可以试一下其他的属性。

•