今天，带来的是纯CSS3的效果--图片3D翻转。
请看效果：亲，请点击这里
这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。
HTML结构：
<div id="content">
<div class="list">
<img src="../Images/1.jpg">
<div class="text">
这是小狗哦！！
</div>
</div>
<div class="list">
<img src="../Images/2.jpg">
<div class="text">
这是小狗哦！！
</div>
</div>
</div>
CSS样式：
<style type="text/css">
*{margin:0px;padding:0px;}
#content{
width:500px;
margin:30px auto;
}
.list{
width:200px;
margin:25px;
float:left;
position:relative;
}
.list img{
width:200px;
height:200px;
transform:perspective(200px) rotateY(0deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.text{
height:200px;
width:200px;
line-height:200px;
background:#000;
color:#fff;
opacity:;
position:absolute;
text-align:center;
font-weight:bold;
top:0px;
left:0px;
transform:perspective(200px) rotateY(-180deg);
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.list:hover img{
transform:perspective(200px) rotateY(180deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
.list:hover .text{
transform:perspective(200px) rotateY(0deg);
opacity:;
transition:transform 600ms ease,opacity 600ms ease;
-webkit-transition:transform 600ms ease,opacity 600ms ease;
}
</style>
代码很容易理解，先为图片设置一个初始旋转角度，因为它是先展示的，所以角度为180deg，透明度为1。当鼠标滑过时，改变角度和透明度，使其翻转。而背后的文字也是如此道理。
享受代码，享受生活，网页效果，每日一更。