用css3实现图片左右翻转

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