"Effects" hover picture stereo flip

hover Picture Flip effect Two:: Rotation around the y axis 90 degrees, pay attention to the parent layer to add perspective property perspective, so as to see the stereoscopic effect

Html:

<ul class= "List-img" >
<li>
<div> text content </div>
<span> I am a picture </span>
</li>
<li>
<div> text content </div>
<span> I am a picture </span>
</li>
<li>
<div> text content </div>
<span> I am a picture </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;o pacity: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;}

Effect preview: http://www.gbtags.com/gb/rtreplayerpreview-standalone/3094.htm

SOURCE Download: HTTP://PAN.BAIDU.COM/S/1O8TVTHG

"Effects" hover picture stereo flip