CSS3 实现3D翻转

CSS3实现3D翻转的思路及源码。

首先,需要增加翻转特效的元素需要有如下的结构:

<div class="box">
<div class="front">正面,只是正面</div>
<div class="back">反面,这是反面</div>
</div>

.box作为一个容器存放翻转的元素,然后.front是正面显示的内容,.back是反面显示的内容。

然后就是css3的处理了,主要就是transitiontransform的应用。

比较重要的两个部分,实现3d透视和翻转后反面隐藏掉,代码片段:

.box {
...
实现透视
-webkit-perspective: 800px;
...
}

.box .front,
.box .back {
...
翻转后反面隐藏
-webkit-backface-visibility: hidden;
...
}

完整代码及演示