纯css3实现双面图片效果

先上代码

//html部分代码
<div>
  <p class="face"> 正面</p>
  <p class="back">背面</p>
</div>

//css部分代码
div,p
{
  border:solid 1px ;
}
div 
{
  border-color:red;
}
p
{
  padding:0px;
  width:50px;
  height:50px;
  backface-visibility: hidden;
  position:absolute;
  transition: transform 2s; 
}
div
{
    width:100px;
    height:100px;
}
.back
{
  transform:rotateY(-180deg);
}
div:hover .face
{
  transform:rotateY(180deg);
}
div:hover .back
    {
        transform:rotateY(0deg);
      }

---

分析:
实现此效果用到的关键方法：

1. backface-visibility: hidden; 当元素旋转到背面之后是否显示
2. transition: transform 2s;  css3的过渡动画 transition
3. position:absolute;  把所有元素的位置设置为绝对的（此时元素就盖在一起了）

逻辑：
1.首先对p的位置绝对化，让他们盖在一起，
2.然后对p的两个元素做操作，把背面元素旋转-180度，
由于此时设置了backface-visibility: hidden;
所以背面元素不会显示出来，
3.当鼠标移动到div上面时，把背面的图片旋转回来，把正面的图片旋转到背面
由于有backface属性，所以当背面的旋转回来时，不受属性影响，那么此时“正面”看到的就是背面的图片，同时因为正面的图片旋转了180度，就是到背面了，然后就会收到backface属性的影响，所以就会自动隐藏，然后不显示他。

4.当鼠标移开div，由于css3过渡属性，所以此时会返回原来的设置，背面的回到原来的-180，正面的旋转到前面，背面的不显示了。

感受：
这种代码写的挺巧妙的，没有用js，纯css3，（需要Chrome或者火狐等现代浏览器才支持背面backface这个属性）”