CSS 3D轉(zhuǎn)換在 CSS 中，除了可以對(duì)頁(yè)面中的元素進(jìn)行 2D 轉(zhuǎn)換外，您也可以對(duì)象元素進(jìn)行 3D轉(zhuǎn)換（將頁(yè)面看作是一個(gè)三維空間來對(duì)頁(yè)面中的元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放和傾斜等操作）。與 2D 轉(zhuǎn)換相同，3D 轉(zhuǎn)換同樣不會(huì)影響周圍的元素，而且可以與其它元素重疊。但是，變換后的元素任然會(huì)占用其默認(rèn)位置（未變換前）的空間。
三維坐標(biāo)系
我們先來了解下三維坐標(biāo)系，所謂三維坐標(biāo)系，就是在原有的二維坐標(biāo)系上加上了一個(gè)z軸，這樣就形成了一個(gè)立體空間，如下圖所示：
①x軸：水平向右 注意：x 右邊是正值，左邊是負(fù)值
②y軸：垂直向下 注意：y 下面是正值，上面是負(fù)值
③z軸：垂直屏幕 注意：往外面是正值，往里面是負(fù)值
轉(zhuǎn)換屬性
| 屬性 | 描述 | CSS |
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 3 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。 | 3 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。 | 3 |
| perspective | 規(guī)定 3D 元素的透視效果。 | 3 |
| perspective-origin | 規(guī)定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定義元素在不面對(duì)屏幕時(shí)是否可見。 | 3 |
3D Transform方法
| 函數(shù) | 描述 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉(zhuǎn)化。 |
| translateX(x) | 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。 |
| translateY(y) | 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。 |
| scale3d(x,y,z) | 定義 3D 縮放轉(zhuǎn)換。 |
| scaleX(x) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉(zhuǎn)。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉(zhuǎn)。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉(zhuǎn)。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉(zhuǎn)。 |
| perspective(n) | 定義 3D 轉(zhuǎn)換元素的透視視圖。 |
1. translate3d()
translate3d() 函數(shù)用于移動(dòng)元素在 3D 空間中的位置，這種變換的特點(diǎn)是通過三維矢量坐標(biāo)來定義元素在每個(gè)方向上（X軸、Y軸、Z軸）的偏移量。函數(shù)的語(yǔ)法格式如下：
translate3d(tx, ty, tz)
參數(shù)說明如下：
（1）tx：表示元素在水平方向（X 軸）移動(dòng)的距離；
（2）ty：表示元素的垂直方向（Z 軸）移動(dòng)的距離；
（3）tz：表示元素在 Z 軸移動(dòng)的距離，該參數(shù)不能使用百分比值。
2. translateZ()
函數(shù) translateZ() 用來沿三維坐標(biāo)系的 Z 軸來移動(dòng)元素，函數(shù)的語(yǔ)法格式如下：
translateZ(tz);
其中參數(shù) tz 用來設(shè)置元素在 Z軸上移動(dòng)的距離。
提示：translateZ(tz); 相當(dāng)于 translate3d(0, 0, tz); 的簡(jiǎn)寫形式。
3.rotate3d()
rotate3d() 函數(shù)用來設(shè)置元素沿 X軸、Y軸或 Z軸方向旋轉(zhuǎn)的角度，該函數(shù)只會(huì)使元素按照固定的軸旋轉(zhuǎn)，不會(huì)使元素變形。rotate3d() 函數(shù)的語(yǔ)法格式如下：
rotate3d(x, y, z, a)
參數(shù)說明如下：
x：設(shè)置旋轉(zhuǎn)軸的 X軸坐標(biāo)；
y：設(shè)置旋轉(zhuǎn)軸的 Y軸坐標(biāo)；
z：設(shè)置旋轉(zhuǎn)軸的 Z軸坐標(biāo)；
a：設(shè)置元素旋轉(zhuǎn)的角度，正角度表示順時(shí)針旋轉(zhuǎn)，負(fù)角度表示逆時(shí)針旋轉(zhuǎn)。
4. scale3d()
scale3d() 函數(shù)可以改變?cè)氐拇笮。s放），函數(shù)的語(yǔ)法格式如下：
scale3d(sx, sy, sz)
參數(shù)說明如下：
sx：表示元素在 X 軸方向的縮放比例；
sy：表示元素在 Y 軸方向的縮放比例；
sz：表示元素在 Z 軸方向的縮放比例。
5. matrix3d()
matrix3d() 函數(shù)與前面我們學(xué)習(xí)的 matrix() 函數(shù)非常相似，不過 matrix3d() 函數(shù)可以使用一個(gè) 4 × 4 的矩陣來描述一個(gè)三維（3D）轉(zhuǎn)換。通過 matrix3d() 函數(shù)可以一次執(zhí)行所有的 3D轉(zhuǎn)換操作，函數(shù)的語(yǔ)法格式如下：
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
參數(shù)說明如下：
a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4：用來描述各種 3D 轉(zhuǎn)換；
a4、b4、c4：表示元素變換的量。
舉例說明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 讓子盒子保持3d立體空間環(huán)境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotatey(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: aquamarine;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語(yǔ)法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程