題外話：懶了好幾天了，今天接著肝
文章內(nèi)容輸出來源：拉勾教育大前端就業(yè)集訓(xùn)營
1.概述
- 概述：上一篇文章中，介紹了HTML元素的2D轉(zhuǎn)換：平移、旋轉(zhuǎn)、傾斜等；本章則開始介紹，HTML元素的3D轉(zhuǎn)換。
- 3D轉(zhuǎn)換：transform屬性不止能實現(xiàn)2D轉(zhuǎn)換，也可以制作3D立體轉(zhuǎn)換效果，比普通的x、y軸組成的平面效果多了一條z軸，如下圖:
- 透視：電腦顯示屏是一個2D平面，圖像之所以具有立體感(3D效果)，其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的。
說明：“近大遠(yuǎn)小”是透視的精髓，也是在2D屏幕上展示3D效果的必要條件。
2.透視屬性perspective
- 概述：設(shè)置在z軸的視線焦點的觀察位置，從而實現(xiàn)3D查看效果。
- 屬性值：像素值，數(shù)值越大，觀察點距離原點越遠(yuǎn)，圖形效果越完整且接近原始的尺寸。
- 注意：透視屬性需要設(shè)置給3D變化元素的父級。
- 書寫方式：perspective: 1000px;
說明：你會發(fā)現(xiàn)透視和沒有透視好像沒有區(qū)別？因為圖像的z軸方向沒有發(fā)生任何變化，所以和2D圖像看起來一樣。
3.3D旋轉(zhuǎn)
- 概述：3D旋轉(zhuǎn)比2D旋轉(zhuǎn)更加復(fù)雜，需要分別對3個方向的旋轉(zhuǎn)角度進(jìn)行設(shè)定。當(dāng)然，如果只有一個方向有旋轉(zhuǎn)角度，則只需要寫那個方向即可。
- 屬性：transform
- 屬性值：
| 屬性值 | 說明 |
|---|---|
| rotateX(angle) | 定義沿著X軸的3D旋轉(zhuǎn) |
| rotateY(angle) | 定義沿著Y軸的3D旋轉(zhuǎn) |
| rotateZ(angle) | 定義沿著Z軸的3D旋轉(zhuǎn) |
- 注意事項：屬性值的角度區(qū)分正負(fù)，以deg為單位（此處和2D一樣），正值為順時針方向，負(fù)值逆時針方向。
說明：在做3D轉(zhuǎn)換的時候，腦子里一定要有這個坐標(biāo)系，其實很簡單，記住坐標(biāo)軸正負(fù)和方向就好。
一個簡單的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
perspective: 1000px;
margin: 350px auto;
}
img{
/* 為了居中設(shè)定的屬性 */
position: relative;
left: 50%;
margin-left: -150px;
width: 300px;
/* 過渡 */
transition: all 0.2s linear 0s;
}
img:hover{
transform: rotateX(40deg);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" alt="">
</div>
</body>
</html>
說明：因為只對X軸進(jìn)行了旋轉(zhuǎn)，且X軸的“旋轉(zhuǎn)正方向”為垂直圖片向里，所以我們感覺圖片上半部分離我們更遠(yuǎn)了。
透視距離設(shè)置過小的結(jié)果
說明：上面講perspective屬性時提到，該屬性的屬性值相當(dāng)于我們的觀察位置，所以距離過小會出現(xiàn)如圖所示的情況。
一般來說，我們設(shè)定1000px就可以了。
4.3D位移
- 概述：位移因為是3D了，所以也要分為3個方向進(jìn)行移動。
- 屬性：transform
- 屬性值：
| 屬性值 | 說明 |
|---|---|
| translateX(x) | 定義沿著X軸的位移 |
| translateY(y) | 定義沿著Y軸的位移 |
| translateZ(z) | 定義沿著Z軸的位移 |
- 注意事項：屬性值的角度區(qū)分正負(fù)，以px或%為單位（此處和2D一樣），正值為坐標(biāo)軸正方向，負(fù)值負(fù)方向。
一個簡單的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
perspective: 1000px;
margin: 350px auto;
}
img{
/* 為了居中設(shè)定的屬性 */
position: relative;
left: 50%;
margin-left: -150px;
width: 300px;
/* 過渡 */
transition: all 0.2s linear 0s;
}
img:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div>
<img src="cat01.jpeg" alt="">
</div>
</body>
</html>
說明：該案例對圖片在Z軸進(jìn)行了100px的位移，因為Z軸的正方向為垂直于圖片向外，所以看起來圖片變大了。
一個炫酷的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 取消默認(rèn)樣式 */
*{
margin: 0px;
padding: 0px;
}
/* 父盒子 */
.f-box{
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
perspective: 5000px;
transition: all 2.5s ease-in-out 0s;
/* 這個特殊屬性，下面會講，記住了 */
transform-style: preserve-3d;
}
/* 子盒子統(tǒng)一屬性 */
.f-box div{
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
text-align: center;
line-height: 200px;
font-size: 70px;
}
/* 子盒子獨特屬性 */
.c-box1{
background-color: rgba(231, 45, 45, 0.521);
transform: translateZ(100px)
}
.c-box2{
background-color: rgba(231, 150, 45, 0.521);
transform: rotateX(90deg) translateZ(100px);
}
.c-box3{
background-color: rgba(219, 231, 45, 0.521);
transform: rotateX(180deg) translateZ(100px);
}
.c-box4{
background-color: rgba(119, 231, 45, 0.521);
transform: rotateX(270deg) translateZ(100px);
}
.c-box5{
background-color: rgba(45, 88, 231, 0.521);
transform: rotateY(90deg) translateZ(100px);
}
.c-box6{
background-color: rgba(172, 45, 231, 0.521);
transform: rotateY(-90deg) translateZ(100px);
}
/* 旋轉(zhuǎn) */
.f-box:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="f-box">
<div class="c-box1">1</div>
<div class="c-box2">2</div>
<div class="c-box3">3</div>
<div class="c-box4">4</div>
<div class="c-box5">5</div>
<div class="c-box6">6</div>
</div>
</body>
</html>
說明：先用定位將6個面放到一起；然后用3D轉(zhuǎn)換，將6個面各自擺放在正確的位置上；最后將父元素進(jìn)行3D旋轉(zhuǎn)，實現(xiàn)酷炫的3D效果。
transform-style屬性
概述：用于設(shè)置被嵌套的子元素在父元素的3D空間中顯示，子元素會保留自己的3D轉(zhuǎn)換坐標(biāo)軸。
白話：說白了就是讓子元素的3D效果，在父元素中也生效-
屬性值：
- flat：所有的子元素在2D平面呈現(xiàn)；
- preserve-3d：保留3D控件。
用法：3D元素構(gòu)建是指某個圖形是由多個元素構(gòu)成的，可以給這些元素的父元素設(shè)置transform-style:preserve-3d，來使其變成一個真正的3D圖形。
說明：父元素沒有設(shè)置該屬性，則子元素都會像紙片一樣。
兼容性
- Internet Explorer10、Firefox以及Opera支持transform屬性。
- Chrome 和 Safari 需要前綴 -webkit-。
- Internet Explorer 9 需要前綴 -ms-。
前端文章匯總目錄
http://m.itdecent.cn/p/6d80dd616ff4
結(jié)束語：一花一世界，一木一浮生，愿與諸君共勉
