css transform屬性怎麼用

css transform屬性向元素套用2D或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其語法為transform: none|transform-functions。

css transform屬性怎麼用？

作用：transform 屬性向元素套用 2D 或 3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

語法：

transform: none|transform-functions

說明：

● none    定義不進行轉換。    

● matrix(n,n,n,n,n,n)    定義 2D 轉換，並使用六個值的矩陣。

● matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定義3D 轉換，使用16 個值的4x4 矩陣。    

● translate(x,y)    定義 2D 轉換。   

● translate3d(x,y,z)    定義 3D 轉換。   

● translateX(x)    定義轉換，只用 X 軸的值。 

● translateY(y)    定義轉換，只用 Y 軸的值。     

● translateZ(z)    定義 3D 轉換，但以 Z 軸的數值。    

● scale(x,y)    定義 2D 縮放轉換。      

● scale3d(x,y,z)    定義 3D 縮放轉換。    

● scaleX(x)    透過設定 X 軸的值來定義縮放轉換。    

● scaleY(y)    透過設定 Y 軸的值來定義縮放轉換。    

● scaleZ(z)    透過設定 Z 軸的值來定義 3D 縮放轉換。    

● rotate(angle)    定義 2D 旋轉，並在參數中規定角度。   

● rotate3d(x,y,z,angle)    定義 3D 旋轉。    

● rotateX(angle)    定義沿著 X 軸的 3D 旋轉。  

● rotateY(angle)    定義沿著 Y 軸的 3D 旋轉。

● rotateZ(angle)    定義沿著 Z 軸的 3D 旋轉。  

● skew(x-angle,y-angle)    定義沿著 X 和 Y 軸的 2D 傾斜轉換。

● skewX(angle)    定義沿著 X 軸的 2D 傾斜轉換。   

● skewY(angle)    定義沿著 Y 軸的 2D 傾斜轉換。

● perspective(n)    為 3D 轉換元素定義透視視圖。    

註解：

Internet Explorer 10、Firefox、Opera 支援 transform 屬性。

Internet Explorer 9 支援替代的 -ms-transform 屬性（僅適用於 2D 轉換）。

Safari 和 Chrome 支援替代的 -webkit-transform 屬性（3D 和 2D 轉換）。

Opera 只支援 2D 轉換。

css transform屬性使用範例

Hello World

效果輸出：

以上是css transform屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！