最新的Web開發教程
 

Style transform Property

<Style對象

旋轉一個div元素:

document.getElementById("myDIV").style.transform = "rotate(7deg)";
試一試»

定義和用法

變換屬性應用於一個2D或3D變換的元素。 此屬性允許你旋轉,縮放,移動,歪斜等元素。


瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

變換屬性在Internet Explorer 10和Firefox支持。

互聯網瀏覽器9支持一個替代方案中,msTransform屬性(2D transforms only)

歌劇,鉻和Safari支持替代,WebkitTransform屬性(3D和2D變換)。


句法

返回變換屬性:

object .style.transform

設置變換屬性:

object .style.transform="none| 屬性值
描述
none 定義應該是沒有改造
matrix( n,n,n,n,n,n ) 定義了一個2D變換,使用六個值的矩陣
matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n )
限定了3D變換,利用16個值的4×4矩陣
translate( x,y ) 定義一個2D轉換
translate3d( x,y,z ) 定義3D平移
translateX( x ) 定義了一個翻譯,僅使用值X軸
translateY( y ) 定義一個翻譯,只使用Y軸值
translateZ( z ) 定義了一個三維平移,僅使用值的Z軸
scale( x,y ) 定義一個2D縮放轉換
scale3d( x,y,z ) 定義一個3D縮放轉換
scaleX( x ) 通過給出一個值X軸限定了尺度變換
scaleY( y ) 通過給出對於Y軸的值限定了尺度變換
scaleZ( z ) 通過給出一個值的Z軸定義的三維尺度變換
rotate( angle ) 定義了一個二維旋轉,該角度在參數指定
rotate3d( x,y,z,angle ) 定義一個3D旋轉
rotateX( angle ) 限定沿所述X軸的3D旋轉
rotateY( angle ) 限定沿Y軸一3D旋轉
rotateZ( angle ) 限定沿Z軸在3D旋轉
skew( x-angle,y-angle ) 限定沿X軸和Y軸二維傾斜轉換
skewX( angle ) 限定沿所述X軸的二維傾斜轉換
skewY( angle ) 限定沿Y軸一2D歪斜變換
perspective( n ) 定義了一個透視圖,用於3D變換元件
initial 將此屬性設置為默認值。 閱讀關於初始
inherit 繼承其父元素此屬性。 閱讀關於繼承

技術細節

默認值: 沒有
返回值: 一個字符串,表示元素的變換屬性
CSS版本 CSS3

相關頁面

CSS參考: transform property


<Style對象