網(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)換