HTML5 3D书本翻页动画的实现示例

-o-transform: translateZ(-3px);
transform: translateZ(-3px);
}
.p3d {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.dino,
.shadow {
width: 196px;
height: 132px;
position: absolute;
left: 60px;
top: 60px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.dino {
background: url(dino.png) no-repeat;

}
.shadow {
background: url(shadow.png) no-repeat;
}

JavaScript代码

(function (window, document) {
 var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''],
book = document.querySelectorAll('.book')[0],
page = document.querySelectorAll('.front-cover')[0],
dino = document.querySelectorAll('.dino')[0],
shadow = document.querySelectorAll('.shadow')[0],
hold = false,
centerPoint = window.innerWidth / 2,
pageSize = 300,
clamp = function (val, min, max) {
return Math.max(min, Math.min(val, max));
};
 page.onmousedown = function () {
hold = true;
};
 window.onmouseup = function () {
if (hold) {
hold = false;
}
};
 window.onresize = function () {
centerPoint = window.innerWidth / 2;
};
 window.onmousemove = function (evt) {
if (!hold) {
return;
}
 var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0),
i, j;
 for (i = 0, j = prefixes.length; i < j; i++) {
book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)';
page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)';
dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)';
shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)';
}
};
})(window, document);