效果預(yù)覽
基礎(chǔ)知識儲備
-transform:CSS3新增的變形功能火诸，其優(yōu)點是全過程不改變DOM性能更高碱璃。在transform下有如下幾個變形樣式：
1）.translate() --- 位置改變(平移)
2）.scale() --- 縮放比例
3）rotate() --- 旋轉(zhuǎn)角度
4）skew() --- 傾斜(斜切)
以上的幾個形式都支持X軸、Y軸、Z軸的變換方向耗式。
但需要注意：
1）要使用3D變換，需要在其父級開啟3D空間：transform-style: preserve-3d;
2）在變形過程中趁猴，會出現(xiàn)“抖動”效果刊咳，這時我們需要在該元素的該變形屬性加初始值：transform:rotateY(0deg);
3）要想查看到超炫的3D效果還要設(shè)置下景深/透視，transform:perspective(800px) ;這個可以都當(dāng)前元素加或給其元素父級加
-當(dāng)設(shè)置transform:rotate(30deg);旋轉(zhuǎn)角度時可指定其旋轉(zhuǎn)的奇點儡司。transform-origin: x坐標(biāo) y坐標(biāo);
原理級思路
核心思想娱挨，這個展示區(qū)分為左右兩部分。
html布局如下：
<template>
<!-- /* box為整個頁面展示區(qū) */ -->
<div id="box" >
<!-- /* page有前后兩面 */ -->
<div class="page" @click="togoleRegister(true)">
<div class="front"></div>
<div class="back"></div>
</div>
<!-- /* page2為翻頁之后顯示的*/ -->
<div class="page2" @click="togoleRegister(false)"></div>
</div>
</template>
1.當(dāng)未翻頁前捕犬，頁面展示如下圖：
整個展示區(qū)(box)分為左右兩個部分跷坝，這里我們給box一個背景圖(0.png);然后再給page-front（正面）一個相同背景圖(0.png),并把front定在展示區(qū)的右側(cè)。其實我們看到的一張圖是由兩個相同（但大小原圖為一半）的圖組成碉碉。
2.當(dāng)未翻頁前柴钻，頁面展示如下圖：
當(dāng)翻頁后，整個展示區(qū)依然為兩部分誉裆，左部分為page-back(背面顿颅，背景圖(1.png))缸濒，右部分為page2背景圖(1.png)足丢。
需要注意的一點就是，當(dāng)page-front進行翻頁的旋轉(zhuǎn)奇點為左邊庇配。
css布局代碼如下：
/* 將頁面展示區(qū)box設(shè)置寬高背景 */
#box {
background: url("../assets/0.png") no-repeat;
width: 700px;
height: 400px;
/* 此處是為了讓Box在中間顯示 */
margin: 100px auto;
position: relative;
}
/* 設(shè)定page的位置 */
#box .page {
/* 因為其在展示區(qū)右側(cè)斩跌，所以寬度為整個box的一般，并定在右側(cè) */
width: 50%;
height: 100%;
top: 0;
right: 0;
position: absolute;
/* 將開啟3d空間捞慌，方便翻頁后front和back的3d變換 */
transform-style: preserve-3d;
/* 奇點設(shè)為左邊 */
transform-origin: left center;
/* 設(shè)置翻書（旋轉(zhuǎn)）的運動時間耀鸦，運動形式 */
transition: 1s all ease;
/* 提升層級否則會被蓋住 */
z-index: 2;
/* 設(shè)置景深來更好的展示3D效果，并給旋轉(zhuǎn)角度一個初始值，防止抖動發(fā)生 */
transform: perspective(800px) rotateY(0deg);
}
/* 配置旋轉(zhuǎn)頁的前頁 */
.page .front {
/* 寬高與父級page一樣 */
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* 將背景設(shè)成為與前一頁相同的背景,并且只要右面的那部分袖订，與頁面左部分拼接 */
background: url("../assets/0.png") right top no-repeat;
/* backface-visibility屬性和3D transform效果相關(guān)氮帐，它決定當(dāng)一個元素的背面面是否可見 */
backface-visibility: hidden;
/* 提升層級否則會被蓋住 */
z-index: 2;
}
/* 配置旋轉(zhuǎn)頁的后頁 */
.page .back {
/* 寬高與父級page一樣 */
width: 100%;
height: 100%;
/* 將背景設(shè)成為與下一頁相同的背景,并且只要左面的那部分，與右部分的page2拼接 */
background: url("../assets/1.png") left top no-repeat;
position: absolute;
left: 0;
top: 0;
/* 這里設(shè)置將back進行水平方向上的鏡像變化洛姑，因為當(dāng)page旋轉(zhuǎn)180°后上沐， back顯示的效果不對*/
transform: scale(-1, 1);
/* 改變層級避免蓋住其他頁面 */
z-index: 1;
}
/* 配置pages展示區(qū) */
#box .page2 {
/* 因為其只在頁面右側(cè)展示所以寬為Box的一半 */
width: 50%;
height: 100%;
top: 0;
right: 0;
position: absolute;
/* 將背景設(shè)成為與下一頁相同的背景,并且只要右面的那部分，與左部分（.page .back）拼接 */
background: url("../assets/1.png") right top no-repeat;
/* 改變層級避免蓋住其他頁面 */
z-index:1;
}
#box:before {
content: "";
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
background-color: #fff;
background: linear-gradient(225deg, #ffffffD1 45%, #d2d2d2 50%, #cacaca 56%, #ffffffd9 80%);
-webkit-box-shadow: -1px 1px 1px #f0f0f0;
box-shadow: 3px 7px 15px #d8d8d8;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
z-index: 20;
}
#box:hover:before {
width: 100px;
height: 100px;
}
下面我們通過js來控制page進行翻頁(沿著Y軸反向旋轉(zhuǎn)180°)就可以了
js代碼如下：
togoleRegister(val) {
var oBox = document.getElementById('box');
var oPage = document.querySelector('.page');
console.log("oPage.style", oPage.style)
if (val == true) {
oPage.style.WebkitTransform = 'perspective(1600px) rotateY(-180deg)';
// oPage.style.opacity = '0'
} else {
oPage.style.WebkitTransform = 'perspective(1600px) rotateY(0)';
// oPage.style.opacity = '1'
}
},
