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到你的頁面去看看效果吧。

?

轉載于:https://www.cnblogs.com/honeyHHX/p/3597970.html

總結

以上是生活随笔為你收集整理的用css3实现图片左右翻转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。