標籤:位置 tty lis style pretty mat 技術 reserve sla
2D轉換:
2D變換方法:
- translate()
- 根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動。
div { transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */ }
translate值(50px,100px)是從左邊元素移動50個像素,並從頂部移動100像素。
rotate值(30deg)元素順時針旋轉30度。
scale()方法,該元素增加或減少的大小,取決於寬度(X軸)和高度(Y軸)的參數:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準文法 */
scale(2,3)轉變寬度為原來的大小的2倍,和其原始大小3倍的高度。
transform:skew(<angle> [,<angle>]);
包含兩個參數值,分別表示X軸和Y軸傾斜的角度,如果第二個參數為空白,則預設為0,參數為負表示向相反方向傾斜。
- skewX(<angle>);表示只在X軸(水平方向)傾斜。
- skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
div { transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }
skew(30deg,20deg) 元素在X軸和Y軸上傾斜20度30度。
matrix()方法和2D變換方法合并成一個。
matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。
利用matrix()方法旋轉div元素30°
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }
transform-origin 屬性
設定旋轉元素的基點位置:
div{transform: rotate(45deg);transform-origin:20% 40%;-ms-transform: rotate(45deg); /* IE 9 */-ms-transform-origin:20% 40%; /* IE 9 */-webkit-transform: rotate(45deg); /* Safari and Chrome */-webkit-transform-origin:20% 40%; /* Safari and Chrome */}
文法transform-origin:
x-axis y-axis z-axis;
值 |
描述 |
x-axis |
定義視圖被置於 X 軸的何處。可能的值:
- left
- center
- right
- length
- %
|
y-axis |
定義視圖被置於 Y 軸的何處。可能的值:
- top
- center
- bottom
- length
- %
|
z-axis |
定義視圖被置於 Z 軸的何處。可能的值:
|
2D 轉換方法
函數 |
描述 |
matrix(n,n,n,n,n,n) |
定義 2D 轉換,使用六個值的矩陣。 |
translate(x,y) |
定義 2D 轉換,沿著 X 和 Y 軸移動元素。 |
translateX(n) |
定義 2D 轉換,沿著 X 軸移動元素。 |
translateY(n) |
定義 2D 轉換,沿著 Y 軸移動元素。 |
scale(x,y) |
定義 2D 縮放轉換,改變元素的寬度和高度。 |
scaleX(n) |
定義 2D 縮放轉換,改變元素的寬度。 |
scaleY(n) |
定義 2D 縮放轉換,改變元素的高度。 |
rotate(angle) |
定義 2D 旋轉,在參數中規定角度。 |
skew(x-angle,y-angle) |
定義 2D 傾斜轉換,沿著 X 和 Y 軸。 |
skewX(angle) |
定義 2D 傾斜轉換,沿著 X 軸。 |
skewY(angle) |
定義 2D 傾斜轉換,沿著 Y 軸。 |
【Demo】CSS3 2D轉換