3D立體空間的3根軸線

x軸：水平，向右為正，向左為負
y軸：垂直，向下為正，向上為負
z軸：垂直于屏幕，向外為正，向內(nèi)為負

1）3D必備屬性

transform-style: preserve-3d; 創(chuàng)建3d空間
什么時候搭建3d舞臺？
父元素有3D變形，子元素也有3D變形
perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網(wǎng)頁產(chǎn)生3D效果，單位像素
preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相當(dāng)于2D效果?

transform-style屬性和perspective屬性放在父元素中,有時候perspective屬性放在body中

2) 位移

transform: translateZ(z); 沿著z軸方向位移

transform: translate3d(x,y,z) 沿著x、y、z軸方向位移

? z指的是 z 軸的向量位移長度。當(dāng)其值為負值時，元素在 Z 軸越移越遠，導(dǎo)致元素變小。反之當(dāng)值為正值時，

? 其在 Z 軸越移越近，導(dǎo)致元素變得較大。

3) 旋轉(zhuǎn)

transform: rotateX(a); 沿著x軸方向旋轉(zhuǎn)

a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞X軸順時針旋轉(zhuǎn)；反之，如果為負值，元素圍繞X軸逆時針旋轉(zhuǎn)。

transform: rotateY(a); 沿著y軸方向旋轉(zhuǎn)

a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果為負值，元素圍繞Y軸逆時針旋轉(zhuǎn)。

transform: rotateZ(a); 沿著Z軸方向旋轉(zhuǎn)

a 指的是一個旋轉(zhuǎn)角度值，如果為正值，元素圍繞 Z 軸順時針旋轉(zhuǎn)；反之，如果為負值，元素圍繞 Z 軸逆時針旋轉(zhuǎn)。

transform: rotate3d(x,y,z,angle);

?參數(shù)：

? x：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 X 軸旋轉(zhuǎn)的矢量值。

? y：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 Y 軸旋轉(zhuǎn)的矢量值。

? z：是一個 0 到１之間的數(shù)值，主要用來描述元素圍繞 Z 軸旋轉(zhuǎn)的矢量值。

? angle：一個角度值，指定在 3D 空間旋轉(zhuǎn)角度，正值順時針旋轉(zhuǎn)，反之元素逆時。

4）縮放

?transform: scaleZ() 沿著z軸方向縮放
transform: scale3d() 沿著x、y、z軸方向縮放
取值

?默認值為1
? 使用0~1之間的值縮小元素
? ? 使用超過1的值放大元素
?注意：scaleZ單獨使用看不到效果，需要配合其他變換屬性一起使用

總結(jié)

以上是生活随笔為你收集整理的动画3D变形：平移、旋转、缩放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。