css样式是酱紫的：
*{margin:0; padding:0}
body,html{
/*防止抖动*/
overflow: hidden;
}
#box{
width:700px;
height:400px;
background: url("img/0.jpg")
no-repeat;
margin:100px auto;
position:relative;
}
#box .page{
/*在box的右半部分*/
width: 50%;
height: 100%;
top:0;
right:0;
position: absolute;
/*开启3d模式*/
transform-style: preserve-3d;
/*设定旋转中心*/
transform-origin: left center;
transition:1s all ease;
z-index:2;
/*初始化*/
transform:perspective(800px) rotateY(0deg);
}
#box .page div{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#box .page .front{
/*显示图片的右半部分*/
background: url("img/0.jpg") right top no-repeat;
/*不显示背面*/
backface-visibility: hidden;
/*层级比背面高*/
z-index:2;
}
#box .page .back{
background:url("img/1.jpg") left top no-repeat;
z-index: 1;
transform: scale(-1,1);
}
#box .page2{
width:50%;
height:100%;
position:absolute;
right:0;
top:0;
background: url("img/1.jpg") right top no-repeat;
z-index:1;
}
这里面有几个比较重要的css3知识点：
1、transform-style:preserve-3d;开启3d模式，这样才真正的是3d效果，后面的
backface-visibility: hidden;
z-index:2;才会有三维效果
transform-style:flat; 默认是平面
2、 backface-visibility: hidden; 是背面不可见
backface-visibility: visible; 是背面可见
3、transform: scale(-1,1); 水平翻转
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
4、 transform-origin: left center;
transform-origin: x-axis y-axis z-axis;
x-axis：定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%
y-axis：定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%
z-axis：定义视图被置于 Z 轴的何处。可能的值：
length
5、transform:perspective
perspective: number|none;
number：元素距离视图的距离，以像素计。
none 默认值。与 0 相同。不设置透视。
transform:rotate
rotate(angle)
定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)
定义 3D 旋转。
rotateX(angle)
定义沿着 X 轴的 3D 旋转。
rotateY(angle)
定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)
定义沿着 Z 轴的 3D 旋转。
接下来是简单的布局：
<div id="box">
<div class="page">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="page2"></div>
</div>
最后是js部分的代码：
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var oPage = document.querySelector('.page');
var oPage2 = document.querySelector('.page2');
var oFront = document.querySelector('.front');
var oBack = document.querySelector('.back');
var iNow = 0;
var bReady = true;
oBox.onclick = function(){
if(bReady==false) {
return;
}
bReady = false;
iNow++;
oPage.style.transition = '1s all ease';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';
};
oPage.addEventListener('transitionend',function(){
//1.瞬间拉回
oPage.style.transition = 'none';
oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
//2.换图
oBox.style.background = 'url("img/'+(iNow%3)+'.jpg") no-repeat';
oFront.style.background = 'url("img/'+(iNow%3)+'.jpg") right top no-repeat';
oBack.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") left top no-repeat';
oPage2.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") right top no-repeat';
bReady = true;
},false);
},false);
这就是结果啦。效果就像是翻书一样：
给个图：
