利用JavaScript實現(xiàn)簡單3D開關(guān)書本模型

更新時間：2023年11月03日 11:27:10 作者：sAnL1ng散陵

這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)簡單3D開關(guān)書本模型的效果,文中的實現(xiàn)代碼講解的非常詳細,具有一定參考價值,感興趣的同學可以動手嘗試一下

序言

今天我們不聊干貨，來看一些用JS也能實現(xiàn)的輕松有趣的小Demo，首先我們先看實驗效果圖。

看完這張圖后直接把代碼附上！

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <link rel="stylesheet" href="style.css" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
? ? <div class="book p3d">

? ? ? ? <div class="front-cover p3d">
? ? ? ? ? <div class="inside page p3d flip">
? ? ? ? ? ? <p>瓦羅蘭特（VALORANT）是一款第一人稱FPS游戲。
? ? ? ? ? ? ? ? 與傳統(tǒng)FPS游戲不同，游戲中每個角色都擁有其不一樣的技能，小隊角色之間的技能互相搭配進攻能發(fā)揮更強的作用。
? ? ? ? ? ? ? ? 背景設(shè)定：在近未來的地球世界里，全球范圍遭遇了一個重要的事件，名為First Light（原初之光），這個事件改變了地球，帶來了生命、科技和政府運行的大轉(zhuǎn)變。
? ? ? ? ? ? ? ? 部分地球人在這個事件中獲得了超能力，這些擁有超能力的人們被稱為“Radiants（輻射人）”，意味著他們是被原初之光輻射從而獲得了超能力。</p>
? ? ? ? ? </div>
? ? ? ? ? <div class="outside page"></div>
? ? ? ? </div>
? ? ? ? <div class="back-cover p3d">
? ? ? ? ? ? <div class="outside page p3d">
? ? ? ? ? ? ? ? <div class="inside page p3d">
? ? ? ? ? ? ? ? ? ? <div class="shadow"></div>
? ? ? ? ? ? ? ? ? ? <div class="card"></div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script src="index.js"></script>
</body>
</html>

CSS代碼

*{
? ? margin: 0;
? ? padding: 0;
? ? border: 0;
? ? vertical-align: baseline;
? ? box-sizing: border-box; ?/*將容器聲明成IE模型*/
}

html{
? ? height: 100%;
}

body{
? ? height: 100%;
? ? font: 100% / 1.25 Helvetica,arial,sans-serif;
? ? perspective: 1000px;
? ? background-color: #444;
? ? background-image: linear-gradient(to bottom,#444,#999);
}

.p3d{
? ? transform-style: preserve-3d;
}

.book{
? ? width: 300px;
? ? height: 300px;
? ? position: absolute;
? ? left: 50%;
? ? top: 50%;
? ? /* transform: translateY(-50%); */
? ? margin-top: -150px;
? ? color: #fff;
? ? -webkit-transform: rotateX(60deg);
? ? -moz-transform: rotateX(60deg);
? ? -o-transform: rotateX(60deg);
? ? user-select: none;
}

.front-cover{
? ? cursor: move;
? ? transform-origin: 0 50%;
? ? transform: rotateY(0deg);

}

.page{
? ? width: 300px;
? ? height: 300px;
? ? padding: 1em;/*相對父容器大小*/
? ? position: absolute;/*脫離文檔流*/
? ? left: 0;
? ? top: 0;
? ? text-indent: 2em;
}


.inside{
? ? background-color: #2a0303;
}

.outside{
? ? background-color: #fff;
}

.front-cover .outside{
? ? background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.nga.178.com%2Fattachments%2Fmon_202006%2F02%2FjoQ5-38t6XlZ5pT3cS2yo-1o0.png&refer=http%3A%2F%2Fimg.nga.178.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700461884&t=fb89517f74280d519c31d1b97adb1af3);
? ? background-repeat: no-repeat;
? ? background-size: cover;
? ? transform: translateZ(3px);
? }

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

.back-cover .outside{
? ? transform: translateZ(-3px);
}

.back-cover .inside{
? ? background-color: #1e0000;
}

.card,
.shadow{
? ? width: 196px;
? ? height: 132px;
? ? position: absolute;
? ? left: 60px;
? ? top: 60px;
? ? transform-origin: 0 100%;
}

.shadow{
? ? background-color: rgba(0,0,0,0.5);
}

.card{
? ? background-image: url(https://images.9k9k.com/m/gamelib/202011/90947_zkyz.jpg);
? ? background-size: cover;
? ? transform-origin: 0 100%;
}

JS代碼

var front = document.getElementsByClassName('front-cover')[0]
var book = document.getElementsByClassName('book')[0]
var card = document.getElementsByClassName('card')[0]
var shadow = document.getElementsByClassName('shadow')[0]

var hlod = false
var clamp = function(val,min,max){
? ? return Math.max(min,Math.min(val,max))
}

//鼠標是否按下
front.onmousedown = function(){
? ? hlod = true
}

//在window上監(jiān)聽鼠標松開
window.onmouseup = function(){
? ? hlod = false
}

window.onmousemove = function(e){
? ? if(hlod){
? ? ? ? //修改左半邊書的角度，卡片旋轉(zhuǎn)，陰影傾斜
? ? ? ? var deg = clamp((window.innerWidth / 2 - e.x + 300) / 300 * -90, -180, 0)
? ? ? ? front.style.transform = `rotateY(${deg}deg)`
? ? ? ? //整本書立起來 60 + deg / 8
? ? ? ? book.style.transform = `rotateX(${60 + deg / 8}deg)`
? ? ? ? //卡片 deg / 2
? ? ? ? card.style.transform = `rotateX(${deg / 3}deg)`
? ? ? ? //陰影傾斜 deg / 8 (css樣式傾斜)
? ? ? ? shadow.style.transform = `skew(${deg / 8}deg)`

? ? }
}

console.log(front);

var front = document.getElementsByClassName('front-cover')[0]
var book = document.getElementsByClassName('book')[0]
var card = document.getElementsByClassName('card')[0]
var shadow = document.getElementsByClassName('shadow')[0]

var hlod = false
var clamp = function(val,min,max){
? ? return Math.max(min,Math.min(val,max))
}

//鼠標是否按下
front.onmousedown = function(){
? ? hlod = true
}

//在window上監(jiān)聽鼠標松開
window.onmouseup = function(){
? ? hlod = false
}

window.onmousemove = function(e){
? ? if(hlod){
? ? ? ? //修改左半邊書的角度，卡片旋轉(zhuǎn)，陰影傾斜
? ? ? ? var deg = clamp((window.innerWidth / 2 - e.x + 300) / 300 * -90, -180, 0)
? ? ? ? front.style.transform = `rotateY(${deg}deg)`
? ? ? ? //整本書立起來 60 + deg / 8
? ? ? ? book.style.transform = `rotateX(${60 + deg / 8}deg)`
? ? ? ? //卡片 deg / 2
? ? ? ? card.style.transform = `rotateX(${deg / 3}deg)`
? ? ? ? //陰影傾斜 deg / 8 (css樣式傾斜)
? ? ? ? shadow.style.transform = `skew(${deg / 8}deg)`

? ? }
}

console.log(front);

代碼解釋

html部分

引入文件

我們創(chuàng)建的CSS和js文件都需要引入到html文件中

在頭部標記里用link方法引入css文件

<head>
<link rel="stylesheet" href="style.css" rel="external nofollow"  rel="external nofollow" >
</head>

在body里用< script >標簽引入js文件

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

HTML框架構(gòu)建（BEM命名法）

我們將整本書分成了多個部分，總體就是一個book，然后根據(jù)想要實現(xiàn)的效果或者其功能將其劃分成不同子塊

<div class="book p3d">
? ? ? ? <div class="front-cover p3d">
? ? ? ? ? <div class="inside page p3d flip">
? ? ? ? ? ? <p>
? ? ? ? ? </div>
? ? ? ? ? <div class="outside page"></div>
? ? ? ? </div>
? ? ? ? <div class="back-cover p3d">
? ? ? ? ? ? <div class="outside page p3d">
? ? ? ? ? ? ? ? <div class="inside page p3d">
? ? ? ? ? ? ? ? ? ? <div class="shadow"></div>
? ? ? ? ? ? ? ? ? ? <div class="card"></div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>

結(jié)構(gòu)劃分完了剩下的交給CSS樣式編寫就可以了。

CSS樣式編寫

*{
? ? margin: 0;
? ? padding: 0;
? ? border: 0;
? ? vertical-align: baseline;
? ? box-sizing: border-box; ?/*將容器聲明成IE模型*/
}

瀏覽器默認會給body加一個內(nèi)外邊距，所以我們將其設(shè)置為0，之前文章我們了解知道了，CSS中有兩種盒模型，我們現(xiàn)在將其設(shè)置為box-sizing：border-box IE盒模型，為了讓頁面效果更完美的展現(xiàn)出來。

-webkit-transform: rotateX(60deg);
? ? -moz-transform: rotateX(60deg);
? ? -o-transform: rotateX(60deg);

-webkit-transform、-moz-transform、-o-transform分別是針對不同瀏覽器的前綴，以兼容不同瀏覽器。在現(xiàn)代瀏覽器中，大多數(shù)已經(jīng)支持transform屬性并可以省略前綴。

這里我們是將元素繞X軸旋轉(zhuǎn)60度，但需要注意編寫的時候具體怎么設(shè)置角度，我們需要還要根據(jù)頁面呈現(xiàn)效果和其他樣式屬性來確定。

.page{
? ? width: 300px;
? ? height: 300px;
? ? padding: 1em;
? ? position: absolute;
? ? left: 0;
? ? top: 0;
? ? text-indent: 2em;
}

padding: 1em; em是指相對父容器大小

position: absolute;會導(dǎo)致其脫離文檔流

JS交互功能編寫

在這段JS代碼中，主要是用來實現(xiàn)當我們通過鼠標拖拽前封面(front)時，會觸發(fā)相應(yīng)的事件，從而控制頁面元素的旋轉(zhuǎn)角度，實現(xiàn)一個交互效果。

var front = document.getElementsByClassName('front-cover')[0]
var book = document.getElementsByClassName('book')[0]
var card = document.getElementsByClassName('card')[0]
var shadow = document.getElementsByClassName('shadow')[0]

具體來說，首先通過document.getElementsByClassName()方法獲取了front、book、card、shadow四個元素。

front.onmousedown = function(){
? ? hlod = true
}

并定義了hlod變量表示鼠標是否按下。

front.onmousedown = function(){
? ? hlod = true
}

window.onmouseup = function(){
? ? hlod = false
}

接下來，代碼通過給front元素綁定mousedown事件來監(jiān)聽鼠標按下的動作，當鼠標按下時，將hlod設(shè)為true。然后，通過給window綁定mousemove和mouseup事件來監(jiān)聽鼠標移動和松開的動作。當鼠標移動時，如果hlod為true，就計算出deg的值，其值由用戶當前鼠標位置決定。clamp()函數(shù)用于限制deg變量的取值范圍在-180到0之間。隨后，代碼通過修改相應(yīng)元素的transform屬性來實現(xiàn)立體旋轉(zhuǎn)的效果：front元素繞Y軸旋轉(zhuǎn)deg度，book元素繞X軸旋轉(zhuǎn)60 + deg / 8度，card元素繞X軸旋轉(zhuǎn)deg / 3度，shadow元素skew傾斜deg / 8度。其中，模板字面量語法被用來構(gòu)建包含變量的字符串，方便設(shè)置transform的屬性值。

最后，console.log()函數(shù)用于輸出front元素的信息用于檢查調(diào)整。

以上就是利用JavaScript實現(xiàn)簡單3D開關(guān)書本模型的詳細內(nèi)容，更多關(guān)于JavaScript 3D開關(guān)書本的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: