網(wǎng)站建設(shè)空標(biāo)記網(wǎng)站seo查詢站長之家
在 CSS 中，除了可以對(duì)頁面中的元素進(jìn)行 2D 轉(zhuǎn)換外，您也可以對(duì)象元素進(jìn)行
3D轉(zhuǎn)換（將頁面看作是一個(gè)三維空間來對(duì)頁面中的元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放和傾斜等操作）。與 2D 轉(zhuǎn)換相同，3D
轉(zhuǎn)換同樣不會(huì)影響周圍的元素，而且可以與其它元素重疊。但是，變換后的元素任然會(huì)占用其默認(rèn)位置（未變換前）的空間。
3D 轉(zhuǎn)換同樣需要使用 transform 屬性以及一些函數(shù)來實(shí)現(xiàn)，例如：
- matrix3d()：以一個(gè) 4x4 矩陣的形式指定一個(gè) 3D 轉(zhuǎn)換；
- translate3d()：指定對(duì)象的 3D 位移，第 1 個(gè)參數(shù)對(duì)應(yīng) X 軸，第 2 個(gè)參數(shù)對(duì)應(yīng) Y 軸，第 3 個(gè)參數(shù)對(duì)應(yīng) Z 軸，參數(shù)不允許省略；
- translateZ()：指定對(duì)象在 Z 軸的平移；
- rotate3d()：指定對(duì)象的 3D 旋轉(zhuǎn)角度，其中前 3 個(gè)參數(shù)分別表示旋轉(zhuǎn)的方向 X、Y、Z，第 4 個(gè)參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略；
- rotateX()：指定對(duì)象在 X 軸上的旋轉(zhuǎn)角度；
- rotateY()：指定對(duì)象在 Y 軸上的旋轉(zhuǎn)角度；
- rotateZ()：指定對(duì)象在 Z 軸上的旋轉(zhuǎn)角度；
- scale3d()：指定對(duì)象的 3D 縮放，第 1 個(gè)參數(shù)對(duì)應(yīng) X 軸，第 2 個(gè)參數(shù)對(duì)應(yīng) Y 軸，第 3 個(gè)參數(shù)對(duì)應(yīng) Z 軸，參數(shù)不允許省略；
- scaleZ()：指定對(duì)象的 Z 軸縮放；
- perspective()：指定透視距離。
1. translate3d()
translate3d() 函數(shù)用于移動(dòng)元素在 3D
空間中的位置，這種變換的特點(diǎn)是通過三維矢量坐標(biāo)來定義元素在每個(gè)方向上（X軸、Y軸、Z軸）的偏移量。函數(shù)的語法格式如下：
translate3d(tx, ty, tz)
參數(shù)說明如下：
- tx：表示元素在水平方向（X 軸）移動(dòng)的距離；
- ty：表示元素的垂直方向（Z 軸）移動(dòng)的距離；
- tz：表示元素在 Z 軸移動(dòng)的距離，該參數(shù)不能使用百分比值。
【示例】使用 translate3d() 函數(shù)設(shè)置元素在三維空間中的位置：
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;background-color: #CCC;}p {transform: translate3d(25px, 25px, 50px);border: 1px solid red;}</style></head><body><div><p>translate3d(25px, 25px, 50px);</p></div></body></html>
運(yùn)行結(jié)果如下圖所示：
圖：translate3d() 函數(shù)演示
3D 轉(zhuǎn)換使用的是三維坐標(biāo)系，但是沿 Z軸方向的移動(dòng)并不能很明顯的顯現(xiàn)出來，因?yàn)槲覀兺鶗?huì)將網(wǎng)頁看作是一個(gè)二維的平面，并沒有深度。您可以使用
perspective 和 perspective-origin 屬性來為元素添加深度感，即 Z 軸越高的元素顯示的越大，反之則越小。
2. translateZ()
函數(shù) translateZ() 用來沿三維坐標(biāo)系的 Z 軸來移動(dòng)元素，函數(shù)的語法格式如下：
translateZ(tz);
其中參數(shù) tz 用來設(shè)置元素在 Z軸上移動(dòng)的距離。
提示：translateZ(tz); 相當(dāng)于 translate3d(0, 0, tz); 的簡寫形式。
【示例】使用 translateZ() 屬性設(shè)置元素沿 Z軸移動(dòng)的距離：
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;/*兼容 Safari and Chrome */-webkit-perspective-origin: 10% 10%;/*兼容 Safari and Chrome */background-color: #CCC;}p {transform: translateZ(30px);border: 1px solid red;background-color: yellow;}</style></head><body><div><p>translateZ(30px);</p></div></body></html>
運(yùn)行結(jié)果如下圖所示：
圖：translateZ() 函數(shù)演示
3. rotate3d()
rotate3d() 函數(shù)用來設(shè)置元素沿 X軸、Y軸或 Z軸方向旋轉(zhuǎn)的角度，該函數(shù)只會(huì)使元素按照固定的軸旋轉(zhuǎn)，不會(huì)使元素變形。rotate3d()
函數(shù)的語法格式如下：
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)。
【示例】使用 rotate3d() 函數(shù)來旋轉(zhuǎn)元素：
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: rotate3d(0, 1, 2, 40deg);}</style></head><body><div><div class="transform">rotate3d(0, 1, 2, 40deg);</div></div></body></html>
運(yùn)行結(jié)果如下圖所示：
圖：rotate3d() 函數(shù)演示
除了 rotate3d() 函數(shù)外，CSS 中還提供了 rotateX()（沿 X 軸旋轉(zhuǎn)元素）、rotateY() （沿 Y 軸旋轉(zhuǎn)元素）和
rotateZ()（沿 Z 軸旋轉(zhuǎn)元素）三個(gè)函數(shù)來按照不同的坐標(biāo)軸旋轉(zhuǎn)元素。rotateX()、rotateY()、rotateZ() 函數(shù)的語法格式如下：
rotateX(a) /* 等同于 rotate3D(1, 0, 0, a); /
rotateY(a) / 等同于 rotate3D(0, 1, 0, a); /
rotateZ(a) / 等同于 rotate3D(0, 0, 1, a); */
4. scale3d()
scale3d() 函數(shù)可以改變?cè)氐拇笮?#xff08;縮放），函數(shù)的語法格式如下：
scale3d(sx, sy, sz)
參數(shù)說明如下：
- sx：表示元素在 X 軸方向的縮放比例；
- sy：表示元素在 Y 軸方向的縮放比例；
- sz：表示元素在 Z 軸方向的縮放比例。
【示例】使用 scale3d() 函數(shù)來縮放指定元素：
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);}</style></head><body><div><div class="transform">scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);</div></div></body></html>
運(yùn)行結(jié)果如下圖所示：
圖：scale3d() 函數(shù)演示
提示：當(dāng) scale3d() 函數(shù)的參數(shù)數(shù)值超出 [-1，1] 范圍時(shí)，將在對(duì)應(yīng)的方向上放大元素；當(dāng)參數(shù)值在 [-1，1]
范圍內(nèi)時(shí)，將在當(dāng)前方向上縮小元素；當(dāng)參數(shù)值等于 1 時(shí)，則不會(huì)改變?cè)氐拇笮 ?/p>
除了 scale3d() 函數(shù)外，CSS 中還提供了 scaleX()（沿 X 軸縮放元素）、scaleY() （沿 Y 軸縮放元素）和
scaleZ()（沿 Z 軸縮放元素）三個(gè)函數(shù)來按照不同的坐標(biāo)軸縮放元素。scaleX()、scaleY()、scaleZ() 函數(shù)的語法格式如下：
scaleX(sx) /* 等同于 scale(sx, 1); 和 scale3d(sx, 1, 1); /
scaleY(sy) / 等同于 scale(1, sy); 和 scale3d(1, sy, 1); /
scaleZ(sz) / 等同于 scale3d(1, 1, sz); */
5. matrix3d()
matrix3d() 函數(shù)與前面我們學(xué)習(xí)的 matrix() 函數(shù)非常相似，不過 matrix3d() 函數(shù)可以使用一個(gè) 4 × 4
的矩陣來描述一個(gè)三維（3D）轉(zhuǎn)換。通過 matrix3d() 函數(shù)可以一次執(zhí)行所有的 3D轉(zhuǎn)換操作，函數(shù)的語法格式如下：
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：表示元素變換的量。
【示例】使用 matrix3d() 函數(shù)來定義 3D轉(zhuǎn)換：
<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);}</style></head><body><div><div class="transform">matrix3d()</div></div></body></html>
運(yùn)行結(jié)果如下圖所示：
圖：matrix3d() 函數(shù)演示
原文地址CSS 3D轉(zhuǎn)換