css3旋转、放大

css3通过scale()实现放大功能

通过rotate()实现旋转功能

而transition则可设置元素变化所需的时间

html中的结构代码

<ul>
       <li><img src="image/1.jpg" ></li>
       <li><img src="image/2.jpg" ></li>
       <li><img src="image/3.jpg" ></li>
    </ul>

css3样式

ul{
	 margin-top:50px;
	 list-style:none;
}
 ul li{
	 width:200px;
	 height:150px;
	 float:left;
	 margin-left:10px;
	 -webkit-transition:all 1s;
	 -moz-transition:all 1s;
	 -o-transition:all 1s;
 }
 ul li:hover{
	 -webkit-transform:scale(1.5) rotate(10deg);
	 -moz-transform:scale(1.5) rotate(10deg);
	 -o-transform:scale(1.5) rotate(10deg);
 }
 li img{
	 width:100%;
	 height:100%;
 }