例
旋轉<div>元素：
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
試一試» 定義和用法
轉換屬性應用於一個2D或3D變換的元件。 這個屬性可以讓你旋轉，縮放，移動，歪斜等元素。
為了更好地理解轉換屬性， 查看演示 。
| 默認值： | none |
|---|---|
| 遺傳： | no |
| 動畫： | yes. Read about animatable Try it |
| 版： | CSS3 |
| JavaScript語法： | object .style.transform="rotate(7deg)" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-，-moz-，或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -O- |
| transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9 4.0 -webkit- |
句法
transform: none|transform-functions|initial|inherit;屬性值
| 值 | 描述 | 播放 |
|---|---|---|
| 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值的4x4矩陣 | |
| 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軸的2D歪斜變換 | 播放 ” |
| skewX( angle ) | 限定沿X軸的二維傾斜轉換 | 播放 ” |
| skewY( angle ) | 限定沿Y軸的2D歪斜變換 | 播放 ” |
| perspective( n ) | 定義透視圖的3D轉換的元素 | |
| initial | 將此屬性設置為默認值。 閱讀關於初始 | |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
扔在桌子上的圖像
這個例子演示了如何創建"polaroid"照片和旋轉照片。
相關頁面
CSS教程： CSS 2D變換
CSS教程： CSS 3D變換
HTML DOM參考： transform property