# 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 轉換")
- CSS3 動畫屬性(Animation)
- CSS3 @keyframes 規則
- CSS3 animation 屬性
- CSS3 animation-name 屬性
- CSS3 animation-duration 屬性
- CSS3 animation-timing-function 屬性
- CSS3 animation-delay 屬性
- CSS3 animation-iteration-count 屬性
- CSS3 animation-direction 屬性
- CSS3 animation-play-state 屬性
- CSS3 animation-fill-mode 屬性
- CSS 背景屬性(Background)
- CSS background 屬性
- CSS background-attachment 屬性
- CSS background-color 屬性
- CSS background-image 屬性
- CSS background-position 屬性
- CSS background-repeat 屬性
- CSS3 background-clip 屬性
- CSS3 background-origin 屬性
- CSS3 background-size 屬性
- CSS 邊框屬性(Border 和 Outline)
- CSS border 屬性
- CSS border-bottom 屬性
- CSS border-bottom-color 屬性
- CSS border-bottom-style 屬性
- CSS border-bottom-width 屬性
- CSS border-color 屬性
- CSS border-left 屬性
- CSS border-left-color 屬性
- CSS border-left-style 屬性
- CSS border-left-width 屬性
- CSS border-right 屬性
- CSS border-right-color 屬性
- CSS border-right-style 屬性
- CSS border-right-width 屬性
- CSS border-style 屬性
- CSS border-top 屬性
- CSS border-top-color 屬性
- CSS border-top-style 屬性
- CSS border-top-width 屬性
- CSS border-width 屬性
- CSS outline 屬性
- CSS outline-color 屬性
- CSS outline-style 屬性
- CSS outline-width 屬性
- CSS3 border-bottom-left-radius 屬性
- CSS3 border-bottom-right-radius 屬性
- CSS3 border-image 屬性
- CSS3 border-image-outset 屬性
- CSS3 border-image-repeat 屬性
- CSS3 border-image-slice 屬性
- CSS3 border-image-source 屬性
- CSS3 border-image-width 屬性
- CSS3 border-radius 屬性
- CSS3 border-top-left-radius 屬性
- CSS3 border-top-right-radius 屬性
- CSS3 box-shadow 屬性
- Box 屬性
- CSS3 overflow-x 屬性
- CSS3 overflow-y 屬性
- CSS3 overflow-style 屬性
- CSS3 rotation 屬性
- CSS3 rotation-point 屬性
- Color 屬性
- CSS3 opacity 屬性
- Content for Paged Media 屬性
- CSS 尺寸屬性(Dimension)
- CSS height 屬性
- CSS max-height 屬性
- CSS max-width 屬性
- CSS min-height 屬性
- CSS min-width 屬性
- CSS width 屬性
- 可伸縮框屬性(Flexible Box)
- CSS3 box-align 屬性
- CSS3 box-direction 屬性
- CSS3 box-flex 屬性
- CSS3 box-flex-group 屬性
- CSS3 box-lines 屬性
- CSS3 box-ordinal-group 屬性
- CSS3 box-orient 屬性
- CSS3 box-pack 屬性
- CSS 字體屬性(Font)
- CSS font 屬性
- CSS font-family 屬性
- CSS font-size 屬性
- CSS font-size-adjust 屬性
- CSS font-stretch 屬性
- CSS font-style 屬性
- CSS font-variant 屬性
- CSS font-weight 屬性
- 內容生成(Generated Content)
- CSS content 屬性
- CSS counter-increment 屬性
- CSS counter-reset 屬性
- CSS quotes 屬性
- Grid 屬性
- CSS3 grid-columns 屬性
- CSS3 grid-rows 屬性
- Hyperlink 屬性
- CSS3 target 屬性
- CSS3 target-name 屬性
- CSS3 target-new 屬性
- CSS3 target-position 屬性
- CSS 列表屬性(List)
- CSS list-style 屬性
- CSS list-style-image 屬性
- CSS list-style-position 屬性
- CSS list-style-type 屬性
- CSS 外邊距屬性(Margin)
- CSS margin 屬性
- CSS margin-bottom 屬性
- CSS margin-left 屬性
- CSS margin-right 屬性
- CSS margin-top 屬性
- Marquee 屬性
- 多列屬性(Multi-column)
- CSS3 column-count 屬性
- CSS3 column-fill 屬性
- CSS3 column-gap 屬性
- CSS3 column-rule 屬性
- CSS3 column-rule-color 屬性
- CSS3 column-rule-style 屬性
- CSS3 column-rule-width 屬性
- CSS3 column-span 屬性
- CSS3 column-width 屬性
- CSS3 columns 屬性
- CSS 內邊距屬性(Padding)
- CSS padding 屬性
- CSS padding-bottom 屬性
- CSS padding-left 屬性
- CSS padding-right 屬性
- CSS padding-top 屬性
- Paged Media 屬性
- CSS 定位屬性(Positioning)
- CSS bottom 屬性
- CSS clear 屬性
- CSS clip 屬性
- CSS cursor 屬性
- CSS display 屬性
- CSS float 屬性
- CSS left 屬性
- CSS overflow 屬性
- CSS position 屬性
- CSS right 屬性
- CSS top 屬性
- CSS vertical-align 屬性
- CSS visibility 屬性
- CSS z-index 屬性
- CSS 打印屬性(Print)
- CSS page-break-after 屬性
- CSS page-break-before 屬性
- CSS page-break-inside 屬性
- CSS 表格屬性(Table)
- CSS border-collapse 屬性
- CSS border-spacing 屬性
- CSS caption-side 屬性
- CSS empty-cells 屬性
- CSS table-layout 屬性
- CSS 文本屬性(Text)
- CSS color 屬性
- CSS direction 屬性
- CSS letter-spacing 屬性
- CSS line-height 屬性
- CSS text-align 屬性
- CSS text-decoration 屬性
- CSS text-indent 屬性
- CSS text-transform 屬性
- CSS unicode-bidi 屬性
- CSS white-space 屬性
- CSS word-spacing 屬性
- CSS3 hanging-punctuation 屬性
- CSS3 punctuation-trim 屬性
- CSS3 text-emphasis 屬性
- CSS3 text-justify 屬性
- CSS3 text-outline 屬性
- CSS3 text-overflow 屬性
- CSS3 text-shadow 屬性
- CSS3 text-wrap 屬性
- CSS3 word-break 屬性
- CSS3 word-wrap 屬性
- 2D/3D 轉換屬性(Transform)
- CSS3 transform 屬性
- CSS3 transform-origin 屬性
- CSS3 transform-style 屬性
- CSS3 perspective 屬性
- CSS3 perspective-origin 屬性
- CSS3 backface-visibility 屬性
- 過渡屬性(Transition)
- CSS3 transition 屬性
- CSS3 transition-property 屬性
- CSS3 transition-duration 屬性
- CSS3 transition-timing-function 屬性
- CSS3 transition-delay 屬性
- 用戶界面屬性(User-interface)
- CSS3 appearance 屬性
- CSS3 box-sizing 屬性
- CSS3 icon 屬性
- CSS3 nav-down 屬性
- CSS3 nav-index 屬性
- CSS3 nav-left 屬性
- CSS3 nav-right 屬性
- CSS3 nav-up 屬性
- CSS3 outline-offset 屬性
- CSS3 resize 屬性
- CSS 選擇器參考手冊
- CSS 聽覺參考手冊
- CSS 網絡安全字體組合
- CSS 單位
- CSS 顏色
- CSS 合法顏色值
- CSS 顏色名
- CSS 顏色十六進制值
- 免責聲明