前言
今天自己做了一个用 css 和简单的 js 实现“翻书”的效果，所以呢，想跟大家分享一下。由于原版内容较大，所以图片去掉了，只能成为精简版了。那么咱们先来看看效果。
效果原理
它是怎么实现的呢？简单的来讲，就是将几个 div 定位在一起，通过 js 实现点击 div 让 div 旋转来达到“翻书”的效果，最后再点击后封面（最后一个 div），使“书”合上。
那么原理都清楚了，咱们就开始代码实现吧！
代码实现
第一部分
咱们第一部分就是 body 里面的代码了，这个大家应该都清楚应该怎么写，就是几个 div 嘛！
但有一点要注意，div 的上下关系。因为定位所有的 div 会在一起，由于加载顺序，后加载的 div 会在上面，所以要将几个 div 反着放。
<body>
<div class="book pre-3d" id="book">
<!-- 后封面 -->
<ul>
<li class="" id="Rcover"><img src="img/6.jpg" alt=""></li>
<!-- 书页 -->
<li class="pre-3d page front2"><img src="img/5.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/4.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/3.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/2.jpg" alt=""></li>
<!-- 书的封面 -->
<li class="pre-3d page front1"><img src="img/1.jpg" alt=""></li>
</ul>
</div>
</body>
第二部分
接下来就是设置 css 样式了。首先要将所用到的标签的默认样式清除掉。开启页面的 3d 渲染
和景深，景深是为了更好的视觉效果。然后还要讲所有的 div 延 X 轴进行一定角度的旋转，让它更有一种“书”的感觉。其它的基本样式自己就看心情了。
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body,html {
height: 100%;
}
li{
list-style: none;
}
body {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
background-color: #212121;
}
.book {
position: absolute;
top: 30%;
left: 40%;
width: 500px;
height: 500px;
background-color: #fff;
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
/*开3D效果*/
.pre-3d {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #1976D2;
text-align: center;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.front1 {
background-color: paleturquoise;
}
.front2 {
background-color: goldenrod;
}
img{
width: 100%;
height: 100%;
}
</style>
第三部分
这个效果的核心部分也就是 js 代码实现了，但这并不难，非常的简单 js 初学者都能看懂。那咱们先来看看代码
<script>
var b=document.getElementById('book');
var s=document.getElementsByTagName('li');
var c=document.getElementById('Rcover');
var i=5;
b.onclick=function(){
if(i>0){
s[i].style.transform='rotateY(-140deg)';
s[i].style.transition='3s';
i--;
}
}
c.onclick=function(){
for(var j=1;j<6;j++){
s[j].style.transform='rotateY(0deg)';
s[j].style.transition='3s';}
}
</script>
看完代码，应该觉得不难吧？可能就是对 i-- 有些疑问，要知道咱们的 div 是倒着放的。其他的应该也没啥了，我就将完整代码奉上了。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3翻书效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body,html {
height: 100%;
}
li{
list-style: none;
}
body {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
background-color: #212121;
}
.book {
position: absolute;
top: 30%;
left: 40%;
width: 500px;
height: 500px;
background-color: #fff;
-webkit-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
/*开3D效果*/
.pre-3d {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #1976D2;
text-align: center;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.front1 {
background-color: paleturquoise;
}
.front2 {
background-color: goldenrod;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="book pre-3d" id="book">
<!-- 后封面 -->
<ul>
<li class="" id="Rcover"><img src="img/6.jpg" alt=""></li>
<!-- 书页 -->
<li class="pre-3d page front2"><img src="img/5.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/4.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/3.jpg" alt=""></li>
<li class="pre-3d page front2"><img src="img/2.jpg" alt=""></li>
<!-- 书的封面 -->
<li class="pre-3d page front1"><img src="img/1.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
var b=document.getElementById('book');
var s=document.getElementsByTagName('li');
var c=document.getElementById('Rcover');
var i=5;
b.onclick=function(){
if(i>0){
s[i].style.transform='rotateY(-140deg)';
s[i].style.transition='3s';
i--;
}
}
c.onclick=function(){
for(var j=1;j<6;j++){
s[j].style.transform='rotateY(0deg)';
s[j].style.transition='3s';}
}
</script>
</html>
图片也放这里了注意下载的时候注意路径（我将图片放在了 img 文件夹中）和名称。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
网友评论