CSS3 2D 轉換
CSS3 轉換
CSS3轉換,我們可以移動,比例化,反過來,旋轉,和拉伸元素。
它是如何工作?
變換的效果,讓某個元素改變形狀,大小和位置。
您可以轉換您使用2D或3D元素。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
属性 | |||||
---|---|---|---|---|---|
transform | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Internet Explorer 10, Firefox, 和Opera支持transform 屬性.
Chrome 和Safari 要求前綴-webkit- 版本.
注意: Internet Explorer 9要求前綴-ms-版本.
2D 轉換
在本章您將了解2D變換方法:
- translate()
- rotate()
- scale()
- skew()
- matrix()
在下一章中您將了解3D轉換。
實例
div
{
transform: rotate ( 30 deg ) ; - ms-transform: rotate ( 30 deg ) ; /* IE 9 */ - webkit-transform: rotate ( 30 deg ) ; /* Safari and Chrome */
}
嘗試一下»
translate() 方法
translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動。
實例
div
{
transform: translate ( 50 px , 100 px ) ; - ms-transform: translate ( 50 px , 100 px ) ; /* IE 9 */ - webkit-transform: translate ( 50 px , 100 px ) ; /* Safari and Chrome */
}
嘗試一下»
translate值(50px,100px)是從左邊元素移動50個像素,並從頂部移動100像素。
rotate() 方法
rotate()方法,在一個給定度數順時針旋轉的元素。 負值是允許的,這樣是元素逆時針旋轉。
實例
div
{
transform: rotate ( 30 deg ) ; - ms-transform: rotate ( 30 deg ) ; /* IE 9 */ - webkit-transform: rotate ( 30 deg ) ; /* Safari and Chrome */
}
嘗試一下»
rotate值(30deg)元素順時針旋轉30度。
scale() 方法
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倍的高度。
skew() 方法
skew()方法,該元素會根據橫向(X軸)和垂直(Y軸)線參數給定角度:
實例
div
{
transform: skew ( 30 deg , 20 deg ) ; - ms-transform: skew ( 30 deg , 20 deg ) ; /* IE 9 */ - webkit-transform: skew ( 30 deg , 20 deg ) ; /* Safari and Chrome */
}
嘗試一下»
skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。
matrix() 方法
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 */
}
嘗試一下»
新轉換屬性
以下列出了所有的轉換屬性:
Property | 描述 | CSS |
---|---|---|
transform | 適用於2D或3D轉換的元素 | 3 |
transform-origin | 允許您更改轉化元素位置 | 3 |
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 軸。 |