CSS3 2D轉換用法

2022-08-12 06:48:16 字數 675 閱讀 6734

1,translate() 方法

translate

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

例項div

2,rotate() 方法

rotate

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

例項div

3,scale() 方法

scale

scale()方法,該元素增加或減少的大小,取決於寬度(x軸)和高度(y軸)的引數:

operasafarichromefirefoxinternet explorer

例項-ms-transform:scale(2,3); /* ie 9 */

-webkit-transform: scale(2,3); /* safari */

transform: scale(2,3); /* 標準語法 */

www.djznrobot.com

4,skew() 方法

語法transform:skew([,]);

包含兩個引數值,分別表示x軸和y軸傾斜的角度,如果第二個引數為空,則預設為0,引數為負表示向相反方向傾斜。

skewx();表示只在x軸(水平方向)傾斜。

skewy();表示只在y軸(垂直方向)傾斜。

CSS3 2D轉換方法

利用transform 可以實現旋轉 縮放 傾斜 移動 屬性有 translate scale 移動 translatex 10px 水平方向移動10px translatey 50px 垂直方向移動50px translate 10px 水平方向移動10px translate 10px,50px...

CSS3 2D轉換模組

2d轉換模組 屬性 transform 方法 rotate 元素順時針旋轉給定的角度,負值時,元素將逆時針旋轉,單位deg。有rotatex rotatey rotatez,預設z translate 元素從其當前位置移動,根據給定的 left x 座標 和 top y 座標 位置引數。有trans...

CSS3 2D轉換的旋轉和縮放

轉換 transform 是css3中具有顛覆性的特徵之一 可以實現元素的位移 旋轉 縮放 等效果 轉換 transform 可以簡單埋解為變形 移動 translate 旋 rotate 縮放 scale 2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。transform rotate ...