特效hover图片立体翻转

Posted 2020-08-28 小仙前端博客

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