鼠标移上去图片变大的css3效果

html页面的代码如下：

<ul class="img clearfix">
    <li><a href=""><img src="images/90T58PICvY4_1024.jpg" alt=""></a></li>
    <li><a href=""><img src="images/u=2367512334,2722777786&fm=23&gp=0.jpg" alt=""></a></li>
    <li><a href=""><img src="images/71r58PICmDM_1024.jpg" alt=""></a></li>
</ul>

具体的css样式如下：

.img li img{height: 200px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);transform: scale(1);
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;}
.img li img:hover{
    -webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    -o-transform:scale(1.15);
    transform:scale(1.15);
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -o-transition:all 2s ease;
    transition:all 2s ease;}

效果如如下鼠标没移上去的效果：

鼠标移上去的效果（以中间的图片为例）