個(gè)人主頁：學(xué)習(xí)前端的小z
個(gè)人專欄：HTML5和CSS3悅讀
本專欄旨在分享記錄每日學(xué)習(xí)的前端知識(shí)和學(xué)習(xí)筆記的歸納總結(jié)，歡迎大家在評(píng)論區(qū)交流討論！
?CSS3 立體 3D 變換
??1 坐標(biāo)軸
什么是3D的場景呢？2D場景，在屏幕水平和垂直的交叉軸線x軸和y軸。
3D場景，在垂直于屏幕的方法，相對(duì)于3D多出個(gè)Z軸。
Z軸：靠近屏幕的方向是正向，遠(yuǎn)離屏幕的方向是反向。
CSS3中的3D變換主要包括以下幾種功能函數(shù)：
3D位移
- CSS3中的3D位移主要包括translateZ()和translate3d(x,y,z)兩個(gè)功能函數(shù)；
3D旋轉(zhuǎn)
- CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)；
- 再2d中，只有 rotate(30deg)
3D縮放
- CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個(gè)功能函數(shù)；
3D透視視圖
- CSS3中的3D轉(zhuǎn)換元素定義透視視圖，主要包括perspective(n)函數(shù)或者perspective屬性；
??2 perspective 透視視圖
perspective 透視視圖也可以就叫做視距、景深。
如果沒有定義 perspective 視距，就相當(dāng)于沒有近大遠(yuǎn)小。
滿足下面兩個(gè)設(shè)置，才會(huì)產(chǎn)生近大遠(yuǎn)小的感觀：
- 設(shè)置 perspective 視距
- 必須在 z 軸上面有變換（平移、旋轉(zhuǎn)、縮放）
程序中實(shí)現(xiàn)的方法 perspective 元素距離，視線的距離（物體和眼睛的距離越小，近大遠(yuǎn)小的效果越明顯）：
- perspective: 1200px;（在父盒子中使用）
- transform: perspective(1200px);（在子元素中使用）
兩個(gè)都設(shè)置會(huì)發(fā)生沖突，建議只設(shè)置父元素，通常的數(shù)值在900~1200之間。
如果當(dāng)你的視線距離物體足夠遠(yuǎn)的時(shí)候，基本上就不會(huì)有近大遠(yuǎn)小的感覺。
??2.1 perspective-origin
perspective-origin 屬性：定義一個(gè)觀察者的角度。
默認(rèn)情況下，坐標(biāo)系的 Z 軸位于父元素的水平中線與垂直中線的交界處。
我們可以通過設(shè)置 perspective-origin 來調(diào)整位置，使用絕對(duì)定位樣式移動(dòng)元素時(shí)，此時(shí)坐標(biāo)系的 X 軸和 Y 軸以設(shè)置了相對(duì)定位的祖先元素的中點(diǎn)為原點(diǎn)。
要注意的是，在調(diào)整 z 軸的位置的時(shí)候，用戶的視角也會(huì)跟著發(fā)生變化。
perspective-origin 屬性可以定義一個(gè)觀察者的角度，俯視、仰視、左右側(cè)視等等。
perspective-origin 屬性有兩個(gè)值，取值有3種方式：長度、百分比、方位單詞。
取值：
- perspective-origin: x軸距離 y軸距離;
- perspective-origin: x軸百分比 y軸百分比; 默認(rèn)觀察源為 50% 50%，父元素的中心點(diǎn)
- perspective-origin: 方位單詞1 方位單詞2; 方位單詞：top、bottom、center、left、right
- 若只設(shè)置了一個(gè)值，則第二個(gè)值默認(rèn)為 50%
??3 旋轉(zhuǎn)
https://virtual.bbcmic.ro/?disc1=elite.ssd&autoboot
rotateX|Y|Z()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。
左手法則：
transform: rotateX(30deg); /*在3D空間內(nèi)，沿著x軸順時(shí)針旋轉(zhuǎn)*/
transform: rotateY(30deg); /*在3D空間內(nèi)，沿著y軸順時(shí)針旋轉(zhuǎn)*/
transform: rotateZ(30deg); /*在3D空間內(nèi)，沿著z軸順時(shí)針旋轉(zhuǎn)*/
rotate3d(1,1,1, 30deg); /*3d繪制軟件，它自動(dòng)生成向量坐標(biāo)*/
/*
x,y,z的取值為0~1
rotate3d(1,1,1, 30deg) --------->表示x,y,z與30deg的乘積，rotateX(30deg)、rotateY(30deg)、rotateZ(30deg)
rotate3d(0,0,1, 30deg) --------->表示x,y,z與30deg的乘積，rotateX(0)、rotateY(0)、rotateZ(30deg)
*/
如果需要復(fù)雜的3d效果，一般都會(huì)使用3D繪制軟件，3dmax，uity ----> .obj ----> 3d圖形
怎么查看旋轉(zhuǎn)的3d效果，一般會(huì)開啟perspective視距，有一個(gè)遠(yuǎn)小近大。
??5 transform-style 語法
使被轉(zhuǎn)換的子元素保留其 3D 轉(zhuǎn)換，給需要 3D 變換的父（上一級(jí)或者上上級(jí)）元素設(shè)置
transform-style: flat|preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 子元素將不保留其 3D 位置。2D舞臺(tái) |
| preserve-3d | 子元素將保留其 3D 位置。3D舞臺(tái) |
transform-style: preserve-3d 能使在同一位置的元素中心點(diǎn)交匯。自然 flat 值就是不能夠交匯咯。
只要CSS繪制3D圖形，這個(gè)transform-style必須加上，perspective可以選擇性的添加。
??6 transform-origin
| 值 | 描述 |
|---|---|
| x-axis | 定義視圖被置于 X 軸的何處?？赡艿闹担簂eft、center、right、length、% |
| y-axis | 定義視圖被置于 Y 軸的何處?？赡艿闹担簍op、center、bottom、length、% |
| z-axis | 定義視圖被置于 Z 軸的何處?？赡艿闹担簂ength |
示例：
/*
將 z軸的原點(diǎn)坐標(biāo)設(shè)置為+50px，相當(dāng)于這時(shí)候原點(diǎn)坐標(biāo)向我們眼睛靠近50px
這時(shí)候加上景深的100px，相當(dāng)于我們距離屏幕為150px了。
*/
transform: perspective(100px);
transform-origin: 50% 50% 50px;
transform-origin其實(shí)和視距也是有關(guān)系的。
??7 平移
translate()方法，根據(jù)左(X 軸)和頂部(Y 軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。
transform: translateX(30px);
transform: translateY(30px);
transform: translateZ(30px);
translate3d(x,y,z);
??8 縮放
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)，當(dāng)scale3d()中x軸和y軸同時(shí)為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通過使用3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為1，當(dāng)值大于1時(shí)，元素放大，反之小于1大于0.01時(shí)，元素縮小
scale3d(sx,sy,sz)
- sx：橫向縮放比例
- sy：縱向縮放比例
- sz：Z軸縮放比例
scaleZ(s)
- s：指定元素每個(gè)點(diǎn)在Z軸的比例
-
scaleZ(z)是難點(diǎn)，指的z軸方向上的縱深（視距），并不會(huì)在z軸方向加厚元素，需要在父元素設(shè)置，然后觀察子元素位移距離的增加
/*為什么它不會(huì)產(chǎn)生任何效果？*/
transform: perspective(100px) scaleZ(2);
原因就是沒有產(chǎn)生近大遠(yuǎn)小，至少來說，必須要通過其他的變形函數(shù)產(chǎn)生近大遠(yuǎn)小才可以看到效果
正確示例：
transform: perspective(100px) scaleZ(2) translateZ(1px);
注意：scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒有任何效果，需要配合其他的變形函數(shù)一起使用才會(huì)有效果文章來源：http://www.zghlxwxcb.cn/news/detail-851965.html
scaleZ需要配合 perspective 和 rotateX(45deg) 觀看效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-851965.html
.box {
transform-style: preserve-3d;
perspective: 800px;
}
.center {
transform: scaleZ(10) rotateX(45deg);
}
/*or*/
.box {
transform-style: preserve-3d;
}
.center {
transform: perspective(800px) scaleZ(10) rotateX(45deg);
}
到了這里，關(guān)于CSS3 立體 3D 變換的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
