CC3中的2D轉換

2022-10-10 13:27:14 字數 1344 閱讀 1416

2d轉換方法：

translate()


rotate()


scale()


skew()


matrix()
1、translate()方法，根據左(x軸)和頂部(y軸)位置給定的引數，從當前元素位置移動

例如：

1


div2
translate值（50px，100px）是從左邊元素移動50個畫素，並從頂部移動100畫素。

2、rotate()方法，在乙個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

例如：

1


div2
rotate值（30deg）元素順時針旋轉30度。

3、scale()方法，該元素增加或減少的大小，取決於寬度（x軸）和高度（y軸）的引數：

例如：

1


-ms-transform:scale(2,3); 


/*ie 9 */2


-webkit-transform: scale(2,3); 


/*safari */3


transform: scale(2,3); 


/*標準語法 


*/
scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。

4、skew() 方法

語法：

1


transform:skew([,]);
包含兩個引數值，分別表示x軸和y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜

例如」：

1


div2
skew(30deg,20deg) 元素在x軸和y軸上傾斜20度30度

5、matrix()方法和2d變換方法合併成乙個。

matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。

例如：

1


2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...


CSS3中的2D轉換
通過 css3 轉換，我們能夠對元素進行移動 縮放 轉動 拉長或拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果。注 internet explorer 10 firefox 以及 opera 支援 transform 屬性。chrome 和 safari 需要字首 webkit 屬性transfo...


CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...