目錄

• 前言
• 思路準備
• 正文
• 一、CSS實現
• 1、搭建基本框架
• 2、編寫CSS
• 二、JS實現
• 總結

前言

本文將帶大家來實現一個非常有趣的案例——打開書本效果。我們平常沖浪時是不是看過一些學校高級的錄取通知書，翻開通知書就能看見里面的內容，呈現出逼真的3D效果！

先來看效果圖：

思路準備

• 把這本書看成是2個容器組成——左半本書和右半本書，左半本書有外表面和內表面，右半本書也有自己的內表面和外表面，相當于兩個小矩形。
• 當鼠標點擊書本向左移動時實現翻開效果，也就是只有左半本書可以翻動——繞著y軸旋轉。
• 同時右半本書的卡片會豎起來，陰影也會隨之傾斜，整本書也會旋轉一定角度。

正文

一、CSS實現

1、搭建基本框架

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

<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、編寫CSS

1）設置背景顏色，實現漸變效果。

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

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

2）設置最外層容器book的樣式：寬高設置具體值并使它們在屏幕中間顯示——主要利用定位position:absolute實現，top、left的值都為50%，再讓它們的左外邊距和上外邊距為自身寬高的負一半可以實現垂直居中顯示。

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

3）設置左半本書和右半本書里面的頁面的寬高——和書一樣大小，并利用定位——脫離文檔流，讓這些頁面在同一個位置，同時設置內殼背景色為紅色，外殼為白色（方便放背景圖），讓左半本書繞著Y軸旋轉。同時設置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; //鼠標放上去呈十字架形狀  transform-origin: 0 50%;  //transform:rotateY(-160deg) //可以利用這個看看旋轉的效果}.p3d {  transform-style: preserve-3d;}

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

.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）此時你會發現里面的文字反了，解決辦法是讓那頁反著的頁面旋轉180度就能正常了。到此為止左半本就完成了！

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

6）設置右半本書的豎起來的卡片和倒影的位置、大小、顏色，起初兩者重疊。

.book .shadow,.book .card {  width: 196px;  height: 132px;  position: absolute;  top: 60px;  left: 60px;  transform-origin: 0 100%; //設置旋轉起點}.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實現

1）引入js文件到html中

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

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

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

3）鼠標點擊到前半本書移動時開始觸發監聽事件，可以再window身上設置

window.onmousemove = function(event){}

4）用一個變量表示鼠標的狀態是點擊、移動還是松開，類似于一個開關變量。默認是松開狀態。

let hold=false//鼠標是按住的狀態leftPage.onmousedown=function(){  hold=true}window.addEventListener("mouseup",function(){  //鼠標不一定在page身上松開可能在其他地方松開，所以在window身上設置監聽事件  hold=false})

5）設置移動事件。監聽此時鼠標按下去的那一刻點的X坐標以及移動中的X軸上的變化，從而設置一個合理的值，讓它繞Y軸旋轉。讓書、前半本書、卡片、陰影都能旋轉移動角度。

window.onmousemove = function(event){  if(hold){    console.log(event.pageX);    var angle= clamp((window.innerWidth/2 - event.pageX + 300)/300* -90,-180,0) //300為書的寬度   //該angle公式中的值不固定，可以設置其他    // 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函數中——min:-180deg,max:0deg,中間值：(window.innerWidth/2 - event.pageX + 300)/300* -90。總之這樣設置是為了旋轉角度比較契合，你也可以設置其他值。該值是在-180~0之間
• skewX()：指定對象繞X軸斜切扭曲。
• 這些旋轉的角度都可以設置其他值，不過得設置的比較符合。

6）設置給定3個值中取中間值的函數

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

到此為止，動態翻書效果案例結束啦！有沒有覺得一種恍然大悟的感覺！說不定以后會用上喲！

總結

到此這篇關于JS+CSS實現超漂亮的動態翻書效果的文章就介紹到這了,更多相關js動態翻書效果內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！