css3越来越受关注，自己也捣鼓个图片左右翻转的效果，供大家参考（有写的不好的地方欢迎指正）。
一、样式：
.FZ{ width:640px; margin:0 auto; border:1px solid #ddd; overflow:hidden} .FZ li{ width:150px;height:80px;margin:5px;float:left;position:relative} .FZ li .info{-webkit-transition:.3s ease-in;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in;transition:.3s ease-in; position:absolute; top:0; left:0; z-index:2} .FZ li .info img{ width:150px; height:80px; overflow:hidden} .FZ li a{ width:150px; height:80px;font:normal 14px/80px Arial; text-align:center; color:#fff; background:#999;position:absolute;top:0; left:0;z-index:1;display:none;} .FZ li.on .info{-webkit-transform:rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);z-index:1;} .FZ li.on a{ z-index:2;display:inline-block;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}
二、html代码：
<p class="tip">用css3实现图片左右翻转</p> <ul class="FZ"> <li onmouseover="this.className=‘on‘" onmouseout="this.className=‘‘ "><div class="info"><img src="img01.jpg" /><a>1</a></div></li> <li onmouseover="this.className=‘on‘" onmouseout="this.className=‘‘ "><div class="info"><img src="img02.jpg"/><a>2</a></div></li> <li onmouseover="this.className=‘on‘" onmouseout="this.className=‘‘ "><div class="info"><img src="img03.jpg" alt="" /><a>3</a></div></li> <li onmouseover="this.className=‘on‘" onmouseout="this.className=‘‘ "><div class="info"><img src="img04.jpg"/><a>4</a></div></li> </ul>
好啦，copy到你的页面去看看效果吧。
原文：http://www.cnblogs.com/honeyHHX/p/3597970.html