css3简单旋转
<style type="text/css">
.img{
width:1200px;
height:300px;
border:1px solid red;
margin:auto;
}
li{
list-style:none;
float:left;
margin-left:15px;
-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;
-moz-transform-style:preserve-3d;-moz-transition:1.5s;
}
li:hover{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
}
</style>
<body>
<ul class="img">
<li><img src="images/img1.jpg"></li>
<li><img src="images/img2.jpg"></li>
<li><img src="images/img3.jpg"></li>
<li><img src="images/img4.jpg"></li>
</ul>
如果使用transform想要不影响子级
在子元素中添加transform进行反向操作 scale(1/父元素放大指定的倍数)
