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%;

}