css3 图片3D翻转

 

css代码：
li:hover img{
    -webkit-transform:rotateY(-180deg);/*在Safari 和 Chrome兼容下还原*/
     -moz-transform:rotateY(-180deg);/*在Firefox兼容下还原*/
     -ms-transfrom:rotateY(-180deg);/*在IE9兼容下还原*/
     -o-transform:rotateY(-180deg);/*在opera兼容下还原*/
   transform:rotateY(-180deg);/*适用于所有浏览兼容下还原*/
}
 .img1 {
  width: 175px;
  height: 175px;
  -webkit-transition:1s all;/* 适用Safari 和 Chrome兼容 */
  -moz-transition:1s all;/* 适用Firefox兼容 */
  -ms-transition:1s all;/* 适用IE9兼容 */
  -o-transition:1s all;/* Opera */
  transition: 1s;
}

<li>
      <img src="images/pic.png" alt="" class="img1">
 </li>