前言
今天自己做了一個(gè)用 css 和簡(jiǎn)單的 js 實(shí)現(xiàn)“翻書(shū)”的效果乾吻，所以呢，想跟大家分享一下拟蜻。由于原版內(nèi)容較大绎签，所以圖片去掉了，只能成為精簡(jiǎn)版了瞭郑。那么咱們先來(lái)看看效果辜御。
效果原理
它是怎么實(shí)現(xiàn)的呢？簡(jiǎn)單的來(lái)講屈张，就是將幾個(gè) div 定位在一起擒权，通過(guò) js 實(shí)現(xiàn)點(diǎn)擊 div 讓 div 旋轉(zhuǎn)來(lái)達(dá)到“翻書(shū)”的效果，最后再點(diǎn)擊后封面（最后一個(gè) div）阁谆，使“書(shū)”合上碳抄。
那么原理都清楚了，咱們就開(kāi)始代碼實(shí)現(xiàn)吧场绿！
代碼實(shí)現(xiàn)
第一部分
咱們第一部分就是 body 里面的代碼了剖效，這個(gè)大家應(yīng)該都清楚應(yīng)該怎么寫(xiě)，就是幾個(gè) div 嘛焰盗！
但有一點(diǎn)要注意璧尸，div 的上下關(guān)系。因?yàn)槎ㄎ凰械?div 會(huì)在一起熬拒，由于加載順序爷光，后加載的 div 會(huì)在上面，所以要將幾個(gè) div 反著放澎粟。
<body>
<div class="book pre-3d" id="book">
<!-- 后封面 -->
<ul>
<li class="" id="Rcover"><img src="img/6.jpg" alt=""></li>
<!-- 書(shū)頁(yè) -->
<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>
<!-- 書(shū)的封面 -->
<li class="pre-3d page front1"><img src="img/1.jpg" alt=""></li>
</ul>
</div>
</body>
第二部分
接下來(lái)就是設(shè)置 css 樣式了蛀序。首先要將所用到的標(biāo)簽的默認(rèn)樣式清除掉欢瞪。開(kāi)啟頁(yè)面的 3d 渲染
和景深，景深是為了更好的視覺(jué)效果徐裸。然后還要講所有的 div 延 X 軸進(jìn)行一定角度的旋轉(zhuǎn)遣鼓，讓它更有一種“書(shū)”的感覺(jué)。其它的基本樣式自己就看心情了重贺。
<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);
}
/*開(kāi)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>
第三部分
這個(gè)效果的核心部分也就是 js 代碼實(shí)現(xiàn)了骑祟，但這并不難，非常的簡(jiǎn)單 js 初學(xué)者都能看懂檬姥。那咱們先來(lái)看看代碼
<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>
看完代碼曾我，應(yīng)該覺(jué)得不難吧？可能就是對(duì) i-- 有些疑問(wèn)健民，要知道咱們的 div 是倒著放的抒巢。其他的應(yīng)該也沒(méi)啥了，我就將完整代碼奉上了秉犹。
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3翻書(shū)效果</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);
}
/*開(kāi)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>
<!-- 書(shū)頁(yè) -->
<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>
<!-- 書(shū)的封面 -->
<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>
圖片也放這里了注意下載的時(shí)候注意路徑（我將圖片放在了 img 文件夾中）和名稱蛉谜。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
