纯CSS3图片翻转效果详解

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

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

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

首先看HTML文件:

<pre name="code" class="html"><div class="here">
       <div class="picDiv">
             <div class="front">
                    <img src="images/foodImages/food_0.jpg"/>
             </div>
             <div class="back">豆汁焦圈</div>
      </div>
</div>

这里最外面的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单独定义一些属性：

<span style="color:#000000;">.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);
}</span>

前面就是进行一些样式的设定，后面用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/