css3中的2d變形有哪些

css3中的2d變形有：1、位移transform:translate()；2、縮放transform:scale()；3、旋轉transform:rotate()；4、傾斜transform:skew()。

環境：

本文適用於所有品牌的電腦。

（學習影片分享：css影片教學）

2d變形分為：

1、位移：

transform:translate(參數1，參數2)

參數1：在X軸移動的距離

參數2：在Y軸移動的距離

參數的設置:

如果是正值的情況下：X軸往右、Y軸往下，負值的情況下：X軸往左、Y軸往上

例：

我們也可以單獨設定X軸/Y軸的位移：

transform:translateX(參數);　　依照X軸方向位移

# transform:translateY(參數);　　依照Y軸方向位移

2、縮放：

transform:scale(參數1，參數2);  

參數1 ：X軸縮放的比例 

參數2：Y軸縮放的比例

（0 - 0.999999之間縮小，大於1 是放大，等於1為1倍大小不變） 

注意：當兩個參數相同的情況下可以只寫一個參數。

我們同樣能單獨設定X軸/Y軸的縮放

transform:scaleX(參數);　　　依照X軸方向縮放

transform:scaleY(參數);　　　依照Y軸方向縮放

範例：

3、旋轉：

transform:rotate(參數);    （旋轉的度數單位： deg）

預設情況下：繞著中心點轉動

參數為正數時旋轉的方向為順時針旋轉，參數為負值時旋轉方向為逆時針旋轉

我們當然也可以單獨設定圍繞某個軸旋轉的

 transform:rotateX(參數)　　　圍繞X軸旋轉

transform:rotateY(參數)　　　圍繞Y軸旋轉

#範例：

4、傾斜：

transform:skew(參數1，參數2);   （傾斜的角度單位：deg ）

如果是正值的情況下：X軸往右、Y軸往下   

負值的情況下：X軸往左、Y軸往上

毫不例外，傾斜也可以單獨設定某個軸進行傾斜

transform:skewX(參數)　　　按照X軸方向傾斜

transform:skewY(參數)　　　依照Y軸方向傾斜

範例：

相關推薦：CSS教學

#

以上是css3中的2d變形有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！