码迷,mamicode.com
首页 > 其他好文 > 详细

【特效】hover图片立体翻转

时间:2017-01-18 09:42:01      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:pos   span   rgba   .com   color   -o   源码下载   city   transform   

hover图片翻转效果二::绕Y轴旋转90度,注意父层要加透视属性perspective,这样才能看出立体效果

html:

<ul class="list-img">
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
</ul>

css:

.list-img{list-style: none;margin: 0;padding: 0;width: 1320px;margin: 100px auto 0;}
.list-img li{float: left;width: 400px;height: 400px;margin:0 20px;position: relative; perspective: 1000px;}
.list-img li div,.list-img li span{width: 400px;height: 400px;position: absolute;}

.list-img li div{background:rgba(0,0,0,0.6);color: #fff; transform: rotateY(90deg); transition: 0.5s ease-in-out;opacity:0;}
.list-img li:hover div{transform: rotateY(0); opacity: 1;}

.list-img li span{ background:#0CF; transform: rotateY(0); transition: 0.5s ease-in-out;opacity:1;}
.list-img li:hover span{transform: rotateY(-90deg);opacity: 0;}

效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3094.htm

源码下载:http://pan.baidu.com/s/1o8tvthg

 

【特效】hover图片立体翻转

标签:pos   span   rgba   .com   color   -o   源码下载   city   transform   

原文地址:http://www.cnblogs.com/xiaoxianweb/p/6295537.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!