html翻页特效实现原理,CSS3实现超炫3D翻书效果（二）

上回书，我们已经简单实现如何翻一页。好，现在我们复习一下。翻书效果的基本原理，请看下html布局：

简单再次说明下：box为大盒子，主要提供显示区域的左部分；page为要翻转的页面，其包含正面(front)和背面(back)；page2主要提供翻页后显示区域的右部分。

-page定位在页面的右部分，front显示的图片与box的图片组合成一个完整的图。back显示的图片与page2显示的图片组合成一个完整的图。

-翻页前，展示区左部分为box的图，展示区右部分为front的图。

-翻页后，展示区左部分为back的图，展示区右部分为page2的图。

还有一点说明，就是当我们将page翻页后(沿着Y轴旋转-180°)，需要将其拉回(恢复到原来的0°)。并将backd的图与page2的图切换到下一张。

现在我们准备好3张图：

第一步就是我们昨天说看到那样的步骤(具体请看：CSS3实现超炫3D翻书效果(一))，这里就不在重复。

css布局：

*{ margin:0; padding: 0;}

html,body{overflow: hidden;}

#box{

background: url("../images/0.jpg") no-repeat;

width:700px; height:400px;

margin:100px auto;

po