上回书,我们已经简单实现如何翻一页。好,现在我们复习一下。翻书效果的基本原理,请看下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