给大家分享一个原生JS实现的书本立体特效，效果如下：
实现这个特效需要的三张图片如下：
第一张图：0.jpg
第二张图 1.jpg
第三张图：3.jpg
实现代码如下，欢迎大家复制粘贴。
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现书本立体特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#book {
width: 290px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -145px;
background: black;
transform-style: preserve-3d;
}
#book .page {
position: absolute;
width: 100%;
height: 100%;
background: #ccc;
}
#book .topNode {
position: absolute;
width: 100%;
height: 100%;
background: url(images/2.jpg);
background-size: 290px 400px;
}
#book .bottom {
position: absolute;
width: 100%;
height: 100%;
background: url(images/1.png);
background-size: 290px 400px;
}
#backNode {
height: 100%;
width: 50px;
background: url(images/0.png);
position: absolute;
background-size: 50px 400px;
/*translateZ为width一半*/
transform: rotateY(90deg) translateZ(-25px);
}
</style>
</head>
<body>
<div id='book'>
<div id='backNode'></div>
</div>
<script type="text/javascript">
/*上面的page*/
for (var i = 0; i < 25; i ) {
var oPage = document.createElement('div');
oPage.className = 'page';
if (i == 24) {
oPage.className = 'topNode';
}
oPage.style.transform = 'translateZ(' i 'px)';
book.appendChild(oPage);
}
/*下面的page*/
for (var i = 0; i < 25; i ) {
var oPage = document.createElement('div');
oPage.className = 'page';
oPage.style.transform = 'translateZ(' (-i) 'px)';
if (i == 24) {
oPage.className = 'bottom';
//图片要镜像
oPage.style.transform = 'translateZ(' (-i) 'px) scaleX(-1)';
}
book.appendChild(oPage);
}
var reg = 0;
//让书旋转起来
setInterval(function () {
reg ;
book.style.transform = 'perspective(800px) rotateY(' (reg) 'deg)';
}, 4);
</script>
</body>
</html>
