CSS中transform 屬性

CSS中transform 屬性容許你修改CSS可視化模型的座標空間。經過transform，可讓元素進行移動（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。 

若是該屬性有一個非none值, 將會產生一個層疊上下文. 在這種狀況下 對象將做爲它包含的 position: fixed 元素的包含塊（a containing block）。

初始值	none
適用元素	transformable elements
是不是繼承屬性	否
Percentages	refer to the size of bounding box
適用媒體	visual
計算值	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
正規順序	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

語法

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

如何閱讀 CSS 語法。

transform:  <transform-function> [<transform-function>]* | none

Vendor prefixes: 若是您須要使用此功能，請查看瀏覽器兼容性列表，獲取各個瀏覽器供應商的前綴。

取值

• <transform-function>

• 至少一個 CSS transform functions 被應用, 請看下面的示例.

• none

• 指定爲 不該用transform

示例

查看 Using CSS transforms.

標準語法（Formal syntax）

如何閱讀 CSS 語法。

none

範例

參見 Using CSS transforms.

在線示例

HTML Content

<p>Transformed element</p>

CSS Content

p {
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 0 -250px;

  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}

CSS transform函數

transform屬性容許在元素使用的座標系統中使用transform函數到達變形的效果。下面描述了這些功能:

matrix(矩陣)

transform:  matrix(a, c, b, d, tx, ty)/* a, b, c, d 建立了變形矩陣 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty是變形的值 .  */

指定二維矩陣中的6個值，和使用矩陣matrix [a b c d tx ty] 是等效的。

Note: Gecko (Firefox) accepts a <length> value for tx and ty.
Webkit (Safari, Chrome) and Opera currently support a unitless <number> for tx and ty.

在線示例

background: gold;  width: 30em;

   -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
    -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
        transform: matrix(1, -0.2, 0, 1, 0, 0);

background: wheat;max-width: intrinsic;

   -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
    -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
        transform: matrix(1, 0, 0.6, 1,  250, 0);

See also

• Examples of linear transformation matrices Wikipedia

• Coordinate transformation matrices mathamazement.com

• Microsoft's matrix filter MSDN

旋轉

transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */

從原點(由 transform-origin 屬性指定)開始安裝順時針方向旋轉元素一個特定的角度。此操做對象的矩陣是  [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] 。

縮放

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

由[sx, sy]描述指定一個二維縮放操做。若是sy 未指定，默認認爲和sx的值相同。

X方向縮放

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */

使用向量[sx, 1] 完成在X方向上的縮放.

Y方向縮放

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */

使用向量[1, sy] 完成在Y方向的縮放.

傾斜

transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */

元素在X軸和Y軸方向以指定的角度傾斜。若是ay未提供，在Y軸上沒有傾斜。

 

X方向傾斜

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */

繞X軸以指定的角度傾斜

Y方向傾斜

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */

繞Y軸以指定的角度傾斜

平移

transform:  translate(tx[, ty])  /* one or two <length> values */

Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

用向量[tx, ty]完成2D平移。若是ty沒有指定，它的值默認爲0。

X方向平移

transform:  translateX(tx)       /* see <length> for possible values */

在X軸平移指定距離

Y方向平移

transform:  translateY(ty)       /* see <length> for possible values */

在Y軸平移指定距離

瀏覽器兼容性

• Desktop

•  

• Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	3.5 (1.9.1)-moz	yes -webkit	9.0-ms	10.5-o	3.1-webkit
3D Support	10.0-moz	12.0-webkit	10.0-ms	no	4.0-webkit

提示

IE5或以上版本支持 Matrix Filter 屬性完成相同的效果。

在IE9中，使用jQuery動態添加樣式，不顯示效果，其餘瀏覽器顯示正常。是由於IE9認爲 -ms-transform是無效的腳本，不執行。請將 "-ms-transform"改成「msTransform」。

更多內容請查看下面連接:

http://stackoverflow.com/questions/5594117/ie9-why-setting-ms-transform-works-from-css-but-not-with-jquery-css

說明

• CSS 2D Transforms Module Level 3: transformWD

另見

• transform-origin

• Using CSS transforms

• More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.

• A cross-browser 2D transform plugin for jQuery

文檔標籤和貢獻者

 此頁面的貢獻者： zhengxinxin, Sebastianz, kevinfszu, FredWe, teoli, ethertank, lmorchard, OoOoOoOo,leeli

 最後編輯者: zhengxinxin, Oct 14, 2016, 12:06:24 AM

學習 Web 開發的最佳實踐

註冊咱們的新聞報：

電子郵件地址

當即註冊

目前只能提供英文的新聞報。

隱藏新聞報註冊

另見

1. CSS

2. CSS 參考

3. CSS Transforms

4. Guides

   1. 使用 CSS 變形

5. 屬性

   1. backface-visibility

   2. perspective

   3. perspective-origin

   4. transform

   5. transform-box

   6. transform-origin

   7. transform-style

6. Data types

   1. transform-function

2005-2016 Mozilla 開發者網絡及各貢獻者