纯CSS3图片翻转效果详解

最近在学习CSS3，把每一次成功尝试的代码都在这里详细的解释一下。

供大家参考和自己以后查阅。

图片翻转效果很容易实现：

首先看HTML文件:

       

             

                    
             
             
豆汁焦圈
      
 
  
 这里最外面的div的作用是设置CSS中的perspective属性 
  
 
  
w3school对于perspective属性是这样定义的：
 
  
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
 
  
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
 
  
 所以为了使子元素有透视效果，这里我又在外面加了一个div 
  
下面是CSS的定义：
 
  
here：
 
  
 
  
.here{
    padding: 0;
    margin: 0;
    width: 200px;
    height: 200px;
    perspective: 800px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}
picDiv： 
  
 
  
.picDiv{
    position: absolute;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition:transform 1s;
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-moz-transform 1s;
}
 
  
.container的perspective仅仅应用在直接后代元素上，在本例中是应用在picDiv上。为了让所有后代元素都继承父元素的透视效果并在同样的3D空间中生效，父元素需要通过transform-style:preserve-3d来传递它的透视属性。如果没有transform-style，卡片的两个面都会失去立体效果，并且背面的旋转效果也会失效。
 
  
加上CSS3的transition属性，这样用户可以看到整个变形过程。
 
  
给front和back定义属性：
 
  
 
  
.front,
.back{
    width: 200px;
    height: 200px;
    padding: 0;
    margin: 0;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
这里用backface设置为hidden，来隐藏他们的背面;定义position为absolute来使两个Div重合。 
  
 
  
给back单独定义一些属性：
 
  
 
  
.back {
    font-family: 微软雅黑, 宋体, sans-serif;
    line-height: 100px;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    background-color: #000;
    transform:rotateX(180deg);
    -webkit-transform:rotateX(180deg);
    -moz-transform:rotateX(180deg);
}
 
  前面就是进行一些样式的设定，后面用transform让这个Div沿X轴转180度，这样转到了它的背面，根据前面的设定背面被隐藏了。 
  
最后就是鼠标移到Div上的效果
 
  
 
  
.picDiv:hover{
    transform:rotateX(180deg) ;
    -webkit-transform:rotateX(180deg) ;
    -moz-transform:rotateX(180deg) ;
}
这样在鼠标移上去之后，整个Div会沿着X轴旋转180度。 
  
 
  
参考文档 https://24ways.org/2010/intro-to-css-3d-transforms/