CSS3 transform 屬性 · W3School CSS 參考手冊

# CSS3 transform 屬性 ## 實例旋轉 div 元素： ``` div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 支持 transform 屬性。 Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）。 Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。 Opera 只支持 2D 轉換。 ## 定義和用法 transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。為了更好地理解 transform 屬性，請查看這個[演示](/example/css3/demo_css3_transform.html)。 | 默認值： | none | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.transform="rotate(7deg)" | | --- | --- | ## 語法 ``` transform: none|_transform-functions_; ``` | 值 | 描述 | 測試 | | --- | --- | --- | | none | 定義不進行轉換。 | [測試](/tiy/c.asp?f=css_transform_rotate&p=22) | | matrix(_n_,_n_,_n_,_n_,_n_,_n_) | 定義 2D 轉換，使用六個值的矩陣。 | [測試](/tiy/c.asp?f=css_transform_matrix) | | matrix3d(_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 | | translate(_x_,_y_) | 定義 2D 轉換。 | [測試](/tiy/c.asp?f=css_transform_translate) | | translate3d(_x_,_y_,_z_) | 定義 3D 轉換。 | | translateX(_x_) | 定義轉換，只是用 X 軸的值。 | [測試](/tiy/c.asp?f=css_transform_translatex) | | translateY(_y_) | 定義轉換，只是用 Y 軸的值。 | [測試](/tiy/c.asp?f=css_transform_translatey) | | translateZ(_z_) | 定義 3D 轉換，只是用 Z 軸的值。 | | scale(_x_,_y_) | 定義 2D 縮放轉換。 | [測試](/tiy/c.asp?f=css_transform_scale) | | scale3d(_x_,_y_,_z_) | 定義 3D 縮放轉換。 | | scaleX(_x_) | 通過設置 X 軸的值來定義縮放轉換。 | [測試](/tiy/c.asp?f=css_transform_scalex) | | scaleY(_y_) | 通過設置 Y 軸的值來定義縮放轉換。 | [測試](/tiy/c.asp?f=css_transform_scaley) | | scaleZ(_z_) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 | | rotate(_angle_) | 定義 2D 旋轉，在參數中規定角度。 | [測試](/tiy/c.asp?f=css_transform_rotate) | | rotate3d(_x_,_y_,_z_,_angle_) | 定義 3D 旋轉。 | | rotateX(_angle_) | 定義沿著 X 軸的 3D 旋轉。 | [測試](/tiy/c.asp?f=css_transform_rotatex) | | rotateY(_angle_) | 定義沿著 Y 軸的 3D 旋轉。 | [測試](/tiy/c.asp?f=css_transform_rotatey) | | rotateZ(_angle_) | 定義沿著 Z 軸的 3D 旋轉。 | [測試](/tiy/c.asp?f=css_transform_rotatez) | | skew(_x-angle_,_y-angle_) | 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 | [測試](/tiy/c.asp?f=css_transform_skew) | | skewX(_angle_) | 定義沿著 X 軸的 2D 傾斜轉換。 | [測試](/tiy/c.asp?f=css_transform_skewx) | | skewY(_angle_) | 定義沿著 Y 軸的 2D 傾斜轉換。 | [測試](/tiy/c.asp?f=css_transform_skewy) | | perspective(_n_) | 為 3D 轉換元素定義透視視圖。 | 測試 | ## 親自試一試 - 實例 [扔到桌子上面的圖片](/tiy/t.asp?f=css3_image_gallery) 本例演示如何創建“寶麗來”圖片，并旋轉圖片。 ``` <!DOCTYPE html> <html> <head> <style> body { margin:30px; background-color:#E9E9E9; } div.polaroid { width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; /* Add box-shadow */ box-shadow:2px 2px 3px #aaaaaa; } div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -moz-transform:rotate(-8deg); /* Firefox */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ -o-transform:rotate(-8deg); /* Opera */ transform:rotate(-8deg); } </style> </head> <body> <div class="polaroid rotate_left"> <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" /> <p class="caption">上海鮮花港的郁金香，花名：Ballade Dream。</p> </div> <div class="polaroid rotate_right"> <img src="/i/china_pavilion.jpg" alt="世博中國館" width="284" height="213" /> <p class="caption">2010年上海世博會，中國館。</p> </div> </body> </html> ``` ## 相關頁面 CSS3 教程：[CSS3 2D 轉換](/css3/css3_2dtransform.asp "CSS3 2D 轉換") CSS3 教程：[CSS3 3D 轉換](/css3/css3_3dtransform.asp "CSS3 3D 轉換")