Tips：閱讀提示！！！
- 首先，本文針對(duì)的是3D transform變換的學(xué)習(xí)，所以你需要對(duì) 2D transform變換 有一定的了解
- 其次，需要說明的是，代碼是一種需要自己不斷實(shí)踐的學(xué)科，建議各位在開始學(xué)習(xí)本篇文檔的時(shí)候，先創(chuàng)建一個(gè)
html頁面來邊讀邊練，
相信這樣，一定會(huì)給你留下一個(gè)非常直觀且深刻的印象！
本文練習(xí)一些公共代碼
鑒于本文貼了不少代碼來演示，所有這里提前放一個(gè)所有演示的公共代碼片段
// 公共DOM元素，后續(xù)均為此寫樣式表
// 舞臺(tái)容器
<div class="stage">
// 變換元素
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
// 樣式兼容的各個(gè)瀏覽器屬性頭，有需要的在各自代碼中添加
// 下列測(cè)試代碼使用Chorme運(yùn)行
-webkit- /* Safari 和 Chrome */
-ms- /* IE */
-moz- /* Firefox */
-o- /* Opera */
實(shí)現(xiàn)3D變換的基礎(chǔ) -- 透視(perspective)
當(dāng)我們步入CSS3動(dòng)畫殿堂之時(shí)，我們一般都會(huì)從一些簡(jiǎn)單動(dòng)的東西開始學(xué)習(xí)，比如元素的位移，旋轉(zhuǎn)，放大縮小之類的2D transform變換，
那么如何在一個(gè)2D的屏幕上實(shí)現(xiàn)3D的變換呢，這里我們就先需要有一個(gè)概念，就是 透視
從一個(gè)最簡(jiǎn)單的 透視 說起，我們小時(shí)候的數(shù)學(xué)課上，數(shù)學(xué)老師一定會(huì)給我們畫一個(gè)立體正方形，能夠在2D平面上看出3D效果就是 透視 的作用
用一張直觀的圖片來說明一下
透視的類型有以下幾種
那么在CSS3中如何用代碼實(shí)現(xiàn)透視呢？
- 主要是通過
perspective屬性來實(shí)現(xiàn)定義透視距離 -
perspective屬性定義3D元素距視圖的距離，以像素計(jì)，該屬性允許您改變3D元素查看3D元素的視圖 - 透視距離可以這么理解，如果你的顯示器寬度是
1920px的分辨率，那么2000px的透視距離就近似于，從顯示器平面開始，一個(gè)顯示器寬度的距離 - 默認(rèn)值是
0px，可以理解為初始位置 - 注意！！！當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身
- 它有兩種寫法，單個(gè)元素時(shí)候看似效果相同，但是多元素在同一個(gè)舞臺(tái)上呈現(xiàn)時(shí)，就會(huì)出現(xiàn)問題了
- 第一種，是寫在舞臺(tái)元素上，定義
perspective屬性 - 第二種，是配合
transform屬性一起，例如：transform: perspective(600px) rotateY(45deg) - 參考下方示例，您可以在自己的demo中測(cè)試效果區(qū)別，你會(huì)發(fā)現(xiàn)第二種所有元素都是同一角度的旋轉(zhuǎn)，
這是因?yàn)榈谝环N透視點(diǎn)是.stage中央，第二種透視點(diǎn)是每一個(gè).box中央
- 第一種，是寫在舞臺(tái)元素上，定義
// 第一種寫法
.stage {
width: 100%;
height: 100%;
perspective: 1000px;
-webkit-perspective: 500px;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
// 第二種寫法
.stage {
width: 100%;
height: 100%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: perspective(1000px) rotateY(65deg);
-webkit-transform: perspective(1000px) rotateY(65deg);
}
透視基點(diǎn)位置屬性（perspective-origin）
- 既然我我們有透視距離的概念，那么這個(gè)透視基點(diǎn)的意思就是，我們所看的舞臺(tái)或者元素的中心
-
perspective(透視)屬性必須和perspective-origin(透視基點(diǎn))屬性一同使用 -
perspective-origin: x-axis y-axis，xy可以分別是這些值：- left
- right
- center
- length，像素
- %，百分比
- 舉個(gè)不恰當(dāng)?shù)睦樱敢暬c(diǎn)類似看足球比賽中那個(gè)球的位置，因?yàn)樗腥搜鄱紩?huì)盯著場(chǎng)上的足球，你和球的距離理解為透視距離就好，當(dāng)然這并不恰當(dāng)，不要在意
- 該屬性必須與
perspective屬性一同使用，而且只影響3D轉(zhuǎn)換元素，它可以定義在元素中，并且同perspective屬性一樣，定義在哪里影響哪里 - 默認(rèn)值是
50% 50%，表示 xy 中心位置 - 下面我們利用一個(gè)示例來看看，你依舊可以通過修改demo中的參數(shù)，看到效果的變化
// 50% 50% 正好是變換元素的中心點(diǎn)，也是默認(rèn)值
.stage {
width: 100%;
height: 100%;
perspective: 604px;
-webkit-perspective: 604px;
// 使用百分比
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
// 使用像素
// perspective-origin: 200px 100px;
// -webkit-perspective-origin: 200px 100px;
// 使用位置
// perspective-origin: left center;
// -webkit-perspective-origin: left center;
// 也可以混用
// perspective-origin: 200px 10%;
// -webkit-perspective-origin: 200px 10%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
透視盲區(qū)
在我們進(jìn)行3D變換的時(shí)候還會(huì)遇到透視盲區(qū)的問題，比如一個(gè)正方形，旋轉(zhuǎn)45°之后，正好和你的視線完全平行，那么這個(gè)面你就看不到，這就是視覺盲區(qū)
你可以利用下方代碼在自己的demo中查看一下效果
// 我的電腦分辨率是`1920*1080`，透視距離是`604px`
// 如果你看不到效果，可以嘗試修改旋轉(zhuǎn)角度或透視距離，找一下出現(xiàn)盲區(qū)的角度
.stage {
width: 100%;
height: 100%;
perspective: 604px;
-webkit-perspective: 604px
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotateY(65deg);
-webkit-transform: rotateY(65deg);
}
實(shí)現(xiàn)靜態(tài)的3D變換 -- 轉(zhuǎn)換(transform)
相信在2D變換的學(xué)習(xí)中對(duì)于transform屬性一定不陌生了，它不僅可以進(jìn)行2D變換，也可以進(jìn)行3D變換，只不過需要借助上一個(gè)透視的屬性，我們才可以在屏幕中看到變換的效果
先來說明一個(gè)三維坐標(biāo)系的概念，通俗點(diǎn)來說，z軸對(duì)應(yīng)垂直方向，x軸對(duì)應(yīng)前后方向，y軸對(duì)應(yīng)左右方向
后續(xù)我們所說的繞軸變化，你就可以參考這個(gè)圖例，想象一下發(fā)生的變換
接下來我們來看看transform支持的變換類型，如果對(duì)此您有疑問，可以參考w3school的可測(cè)試教程：
- 2D類型
轉(zhuǎn)換（位移）
translate(x,y)/translateX(x)/translateY(y)
縮放scale(x,y)/scaleX(x)/scaleY(y)
旋轉(zhuǎn)rotate(angle)/rotateX(angle)/rotateY(angle)
傾斜skew(x-angle,y-angle)/skewX(angle)/skewY(angle)
matrix()，把所有 2D 變換方法組合為一個(gè)，可接受六個(gè)參數(shù)，matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) - 3D類型
轉(zhuǎn)換（位移）
translate3d(x,y,z)/translateZ(z)，主要是垂直距離的位移
縮放scale3d(x,y,z)/scaleZ(z)，同樣是垂直距離的縮放
旋轉(zhuǎn)rotate3d(x,y,z,angle)/rotateX(angle)/rotateY(angle)/rotateZ(angle)
rotateX/rotateY/rotateZ三種函數(shù)分別意思是繞著XYZ軸做旋轉(zhuǎn)運(yùn)動(dòng)，angle參數(shù)為單位為deg的角度
rotate3d函數(shù)定義一個(gè)變換，它將元素圍繞固定軸移動(dòng)而不使其變形，運(yùn)動(dòng)量由指定的角度定義，
如果為正，運(yùn)動(dòng)將為順時(shí)針，如果為負(fù)，則為逆時(shí)針，想要了解更多可以參考 這篇文檔中的動(dòng)態(tài)示例 理解
2D變換請(qǐng)參考 本文Tips中的鏈接 或百度教程，下面我們來詳細(xì)看下實(shí)現(xiàn)靜態(tài)3D變換的代碼
.stage {
width: 100%;
height: 100%;
perspective: 500px;
-webkit-perspective: 500px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
// 這里表示繞Y軸做旋轉(zhuǎn)65度的變換
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
}
轉(zhuǎn)換基點(diǎn)位置屬性（transform-origin）
-
transform-origin屬性允許您改變被轉(zhuǎn)換元素的位置，2D轉(zhuǎn)換元素能夠改變?cè)豿y軸，3D轉(zhuǎn)換元素還能改變其z軸 -
transform-origin: x-axis y-axis z-axis，這定義了視圖被置于xyz軸的何處，z值只能是length，xy可以分別是這些值：- left
- right
- center
- length，像素
- %，百分比
-
transform-origin屬性必須和transform屬性一同使用 - 默認(rèn)值是
50% 50% 0，表示轉(zhuǎn)換基點(diǎn)位于 xy 中心以及 z軸 0 的位置 - 下面我們利用一個(gè)示例來看看，你依舊可以通過修改demo中的參數(shù)，看到效果的變化
.stage {
width: 100%;
height: 100%;
perspective: 500px;
-webkit-perspective: 500px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.stage .box {
width: 100px;
height: 100px;
margin: 100px 100px;
background-color: #55ffff;
display: inline-block;
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
// 表示旋轉(zhuǎn)元素的基準(zhǔn)點(diǎn)在 x 100px y 100px z -900px 位置
// 值類型自由使用，不做過多說明，參考上方透視基點(diǎn)屬性
transform-origin: 100px 100px -900px;
-webkit-transform-origin: 100px 100px -900px;
}
轉(zhuǎn)換如何呈現(xiàn)屬性（transform-style）
-
transform-style屬性規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素 -
transform-style: flat | preserve-3d，flat表示子元素將不保留其3D位置，preserve-3d表示子元素保留其3D位置 - 默認(rèn)值是
flat，不保留3D位置 - 下面用一個(gè)不同于上面幾個(gè)示例的示例來展示整個(gè)屬性的效果，你可以在demo中修改幾個(gè)屬性來查看效果
<div class="stage">
<div class="box">
<div class="box-out">
<div class="box-in"></div>
</div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
perspective: 1600px;
-webkit-perspective: 1600px;
}
.stage .box {
width: 400px;
height: 400px;
margin: 100px 100px;
background-color: #55ffff;
transform: rotate3d(0, 1, 0, 65deg);
-webkit-transform: rotate3d(0, 1, 0, 65deg);
// 這里會(huì)展示3D效果
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
// 不展示3D效果
// transform-style: flat;
// -webkit-transform-style: flat;
}
.stage .box .box-out {
width: 90%;
height: 90%;
background-color: #ffff00;
transform: rotate3d(0.5, 1, 0, 85deg);
-webkit-transform: rotate3d(0.5, 1, 0, 85deg);
}
.stage .box .box-out .box-in {
width: 150%;
height: 150%;
background-color: #aaff7f;
transform: rotate3d(0.1, 1, 0.5, 85deg);
-webkit-transform: rotate3d(0.1, 1, 0.5, 85deg);
}
背面是否可見屬性（backface-visibility）
-
backface-visibility屬性定義當(dāng)元素不面向屏幕時(shí)是否可見 -
backface-visibility: visible | hidden，visible表示背面是可見的，hidden表示背面不可見 - 該屬性主要用于不想展示被旋轉(zhuǎn)元素的背面時(shí)使用，通常用于一些翻轉(zhuǎn)動(dòng)效，比如爐石的抽卡，就屬于背面可見
- 下面我們可以通過翻拍效果示例來理解一下這個(gè)屬性的作用
<div class="stage">
<div class="box">
<div class="box-prev"></div>
<div class="box-next"></div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
perspective: 1600px;
-webkit-perspective: 1600px;
}
.box {
width: 400px;
height: 400px;
margin: 100px 100px;
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.box-prev,
.box-next {
width: 100%;
height: 100%;
position: absolute;
transition: 0.5s all;
backface-visibility: hidden;
}
.box-prev {
background-color: #ffff00;
z-index: 1;
}
.box-next {
background-color: #aaff7f;
transform: rotateY(180deg);
z-index: 0;
}
.box:hover{
transform: rotateY(180deg);
}
做一些簡(jiǎn)單的循環(huán)動(dòng)效
學(xué)習(xí)了上述代碼之后，我們可以做一些簡(jiǎn)單的循環(huán)動(dòng)效了，這里我們用一個(gè)簡(jiǎn)單的翻書效果來練習(xí)，當(dāng)然還有很多奇思妙想期待你自己去實(shí)踐啦！
<div class="stage">
<div class="box">
<div class="box-prev"></div>
<div class="box-midd"></div>
<div class="box-next">
<span></span>
<span></span>
</div>
</div>
</div>
.stage {
width: 100%;
height: 100%;
}
.box {
width: 400px;
height: 400px;
margin: 100px 100px;
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
}
.box-prev,
.box-midd,
.box-next {
width: 100%;
height: 100%;
position: absolute;
transition: 3s all;
}
.box-prev {
background-color: #ffff9b;
z-index: 2;
}
.box-midd {
background-color: #aaff7f;
z-index: 1;
}
.box-next {
display: flex;
justify-content: space-between;
z-index: 0;
}
.box-next span {
width: 50%;
height: 100%;
}
.box-next span:nth-child(1) {
background-color: #ffff9b;
}
.box-next span:nth-child(2) {
background-color: #aaff7f;
}
.box:hover .box-prev {
transform: perspective(800px) rotateY(-180deg);
transform-origin: perspective(800px) 50% 50% 0;
}
.box:hover .box-midd {
transform: perspective(800px) rotateY(-180deg);
transform-origin: perspective(800px) 50% 50% 0;
}
參考文檔一 ———— 帶你玩轉(zhuǎn)css3的3D！
參考文檔二 ———— 好吧，CSS3 3D transform變換，不過如此！
參考文檔三 ———— CSS perspective 屬性
參考文檔三 ———— CSS perspective-origin 屬性
參考文檔五 ———— CSS transform 屬性
參考文檔六 ———— CSS transform-origin 屬性
參考文檔七 ———— CSS transform-style 屬性
參考文檔八 ———— CSS backface-visibility 屬性
參考文檔九 ———— CSS3中設(shè)置3D變形的transform-style屬性詳解
我是 fx67ll.com，如果您發(fā)現(xiàn)本文有什么錯(cuò)誤，歡迎在評(píng)論區(qū)討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點(diǎn)一顆Star，Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址，非常感謝！！！
