用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到你的页面去看看效果吧。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。