目錄

• 前言
• 思路準(zhǔn)備
• 正文
• 一、CSS實(shí)現(xiàn)
• 1、搭建基本框架
• 2、編寫(xiě)CSS
• 二、JS實(shí)現(xiàn)
• 總結(jié)

前言

本文將帶大家來(lái)實(shí)現(xiàn)一個(gè)非常有趣的案例——打開(kāi)書(shū)本效果。我們平常沖浪時(shí)是不是看過(guò)一些學(xué)校高級(jí)的錄取通知書(shū)，翻開(kāi)通知書(shū)就能看見(jiàn)里面的內(nèi)容，呈現(xiàn)出逼真的3D效果！

先來(lái)看效果圖：

思路準(zhǔn)備

• 把這本書(shū)看成是2個(gè)容器組成——左半本書(shū)和右半本書(shū)，左半本書(shū)有外表面和內(nèi)表面，右半本書(shū)也有自己的內(nèi)表面和外表面，相當(dāng)于兩個(gè)小矩形。
• 當(dāng)鼠標(biāo)點(diǎn)擊書(shū)本向左移動(dòng)時(shí)實(shí)現(xiàn)翻開(kāi)效果，也就是只有左半本書(shū)可以翻動(dòng)——繞著y軸旋轉(zhuǎn)。
• 同時(shí)右半本書(shū)的卡片會(huì)豎起來(lái)，陰影也會(huì)隨之傾斜，整本書(shū)也會(huì)旋轉(zhuǎn)一定角度。

正文

一、CSS實(shí)現(xiàn)

1、搭建基本框架

首先是一本書(shū)，用class="book"的容器裝全部,里面分右半本書(shū)和左半本書(shū)——分別用class="back-cover"、class="front-cover"的div容器表示。右半本書(shū)分內(nèi)殼和外殼——class="page front"、class="page back",同理左半本書(shū)也分內(nèi)殼和外殼，也分別用相同類(lèi)名。右半本書(shū)中放卡片和陰影，分別用class="shadow"、class="card"的div裝。而左半本書(shū)內(nèi)殼放一些文字，為了方便，給一些盒子加上公共類(lèi)名。具體如下：

<div><!-- 右半本 --><div>    <div></div>    <div><div></div><div></div>    </div></div><!-- 左半本 --><div>    <div><p>Solutions to over 1000 popular algorithm problems. All problems are from leetcode.com. Solutions include: - Problem statement - Python code with comments - Description of solution s    trategy - Time and space complexity Does not require internet connection.     Forward solutions by email. Please let me have your comments, correctio…</p>    </div>    <div></div></div>    </div>

2、編寫(xiě)CSS

1）設(shè)置背景顏色，實(shí)現(xiàn)漸變效果。

body {  height: 100%;  font: 100%/1.25 Arial, Helvetica, sans-serif;//字體類(lèi)型  color: #fff;  perspective: 1000px; //必不可少！  background: #444;  background-image: linear-gradient(to bottom, #444, #999);}

tips: perspective——定義了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果，值越大看到的東西越小，不設(shè)置看不出translateZ軸移動(dòng)的近大遠(yuǎn)小的感覺(jué)。perspective-origin——相當(dāng)于人的眼睛看哪里，默認(rèn)是父元素中間地方。這兩個(gè)屬性都是設(shè)置在父元素身上。

2）設(shè)置最外層容器book的樣式：寬高設(shè)置具體值并使它們?cè)谄聊恢虚g顯示——主要利用定位position:absolute實(shí)現(xiàn)，top、left的值都為50%，再讓它們的左外邊距和上外邊距為自身寬高的負(fù)一半可以實(shí)現(xiàn)垂直居中顯示。

.book {  width: 300px;  height: 300px;  position: absolute;  top: 50%;  left: 50%;  margin-top: -150px;  margin-left: -150px;}

3）設(shè)置左半本書(shū)和右半本書(shū)里面的頁(yè)面的寬高——和書(shū)一樣大小，并利用定位——脫離文檔流，讓這些頁(yè)面在同一個(gè)位置，同時(shí)設(shè)置內(nèi)殼背景色為紅色，外殼為白色（方便放背景圖），讓左半本書(shū)繞著Y軸旋轉(zhuǎn)。同時(shí)設(shè)置3D立體效果

.book .page {  width: 300px;  height: 300px;  padding: 1em;  position: absolute;  left: 0;  top: 0;  text-indent: 2em;}.book .front {  background-color: #d93e2b;}.book .back {  background-color: #fff;}.book .front-cover {  cursor: move; //鼠標(biāo)放上去呈十字架形狀  transform-origin: 0 50%;  //transform:rotateY(-160deg) //可以利用這個(gè)看看旋轉(zhuǎn)的效果}.p3d {  transform-style: preserve-3d;}

4）設(shè)置左半本書(shū)外層的封面以及右半書(shū)的外殼向Z軸平移（解決書(shū)的外層布局）

.book .front-cover .back {  background-image: url("https://preview.qiantucdn.com/58pic/35/01/38/55A58PICaUy8sV83Dd78m_PIC2018.jpg%21w1024_new_3072");  background-repeat: no-repeat;  background-size: cover;  transform: translateZ(3px);}.book .back-cover .back {  transform: translateZ(-3px);}

5）此時(shí)你會(huì)發(fā)現(xiàn)里面的文字反了，解決辦法是讓那頁(yè)反著的頁(yè)面旋轉(zhuǎn)180度就能正常了。到此為止左半本就完成了！

.book .flip {  transform: rotateY(180deg);}

6）設(shè)置右半本書(shū)的豎起來(lái)的卡片和倒影的位置、大小、顏色，起初兩者重疊。

.book .shadow,.book .card {  width: 196px;  height: 132px;  position: absolute;  top: 60px;  left: 60px;  transform-origin: 0 100%; //設(shè)置旋轉(zhuǎn)起點(diǎn)}.book .card {  background: url("https://preview.qiantucdn.com/58pic/35/01/38/55A58PICaUy8sV83Dd78m_PIC2018.jpg%21w1024_new_3072");  background-size: cover;}.book .shadow {  background-color: rgba(0,0,0,0.5);}

二、JS實(shí)現(xiàn)

1）引入js文件到html中

<script src="./index.js"></script>

2）獲取到需要的元素。先拿到整本書(shū)，再拿到左半本書(shū)、卡片、陰影.

let book=document.querySelector(".book"),    leftPage=document.querySelector(".front-cover"),    card=document.querySelector(".card"),    shadow=document.querySelector(".shadow")

3）鼠標(biāo)點(diǎn)擊到前半本書(shū)移動(dòng)時(shí)開(kāi)始觸發(fā)監(jiān)聽(tīng)事件，可以再window身上設(shè)置

window.onmousemove = function(event){}

4）用一個(gè)變量表示鼠標(biāo)的狀態(tài)是點(diǎn)擊、移動(dòng)還是松開(kāi)，類(lèi)似于一個(gè)開(kāi)關(guān)變量。默認(rèn)是松開(kāi)狀態(tài)。

let hold=false//鼠標(biāo)是按住的狀態(tài)leftPage.onmousedown=function(){  hold=true}window.addEventListener("mouseup",function(){  //鼠標(biāo)不一定在page身上松開(kāi)可能在其他地方松開(kāi)，所以在window身上設(shè)置監(jiān)聽(tīng)事件  hold=false})

5）設(shè)置移動(dòng)事件。監(jiān)聽(tīng)此時(shí)鼠標(biāo)按下去的那一刻點(diǎn)的X坐標(biāo)以及移動(dòng)中的X軸上的變化，從而設(shè)置一個(gè)合理的值，讓它繞Y軸旋轉(zhuǎn)。讓書(shū)、前半本書(shū)、卡片、陰影都能旋轉(zhuǎn)移動(dòng)角度。

window.onmousemove = function(event){  if(hold){    console.log(event.pageX);    var angle= clamp((window.innerWidth/2 - event.pageX + 300)/300* -90,-180,0) //300為書(shū)的寬度   //該angle公式中的值不固定，可以設(shè)置其他    // leftPage.style.transform="rotate("+angle+"deg)"    leftPage.style.transform=`rotateY(${angle}deg)`    card.style.transform=`rotateX(${angle/2}deg)`    shadow.style.transform=`skewX(${angle/10}deg)`    book.style.transform=`rotateX(${60+angle/8}deg)`  }}

tips:

• clamp函數(shù)中——min:-180deg,max:0deg,中間值：(window.innerWidth/2 - event.pageX + 300)/300* -90。總之這樣設(shè)置是為了旋轉(zhuǎn)角度比較契合，你也可以設(shè)置其他值。該值是在-180~0之間
• skewX()：指定對(duì)象繞X軸斜切扭曲。
• 這些旋轉(zhuǎn)的角度都可以設(shè)置其他值，不過(guò)得設(shè)置的比較符合。

6）設(shè)置給定3個(gè)值中取中間值的函數(shù)

let clamp=function(val,min,max) {      return Math.max(min,Math.min(val,max))    }

到此為止，動(dòng)態(tài)翻書(shū)效果案例結(jié)束啦！有沒(méi)有覺(jué)得一種恍然大悟的感覺(jué)！說(shuō)不定以后會(huì)用上喲！

總結(jié)

到此這篇關(guān)于JS+CSS實(shí)現(xiàn)超漂亮的動(dòng)態(tài)翻書(shū)效果的文章就介紹到這了,更多相關(guān)js動(dòng)態(tài)翻書(shū)效果內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！