transform

使用 CSS transform 可以修改 CSS 視覺模型的空間維度,並且使元素可以平移,旋轉,縮放和傾斜.

如果這個屬性的值不是 none, 將會創建一個 stacking context. In that case the object will act as a containing block for position: fixed elements that it contains.

表達式

/* 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: 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;

值

<transform-function>

見 CSS transform functions.

none

不使用 transform.

Formal syntax

none | <transform-list>
where 
<transform-list> = <transform-function>+
where 
<transform-function> = [ <matrix()> || <translate()> || <translateX()> || <translateY()> || <scale()> || <scaleX()> || <scaleY()> || <rotate()> || <skew()> || <skewX()> || <skewY()> || <matrix3d()> || <translate3d()> || <translateZ()> || <scale3d()> || <scaleZ()> || <rotate3d()> || <rotateX()> || <rotateY()> || <rotateZ()> || <perspective()> ]+
where 
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length> | <percentage> [, <length> | <percentage> ]? )
<translateX()> = translateX( <length> | <percentage> )
<translateY()> = translateY( <length> | <percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length> | <percentage> , <length> | <percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number>, <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

Examples

見 Using CSS transforms.

範例

HTML 內容

<p>Transformed element</p>

CSS 內容

p {
  border: solid red;

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

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

規範

瀏覽器相容性

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be <length>, in addition to the standard <number>.

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

Internet Explorer 9.0或之前的版本沒有支援3D transforms, mixing 3D and 2D transform功能. 例如 as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

[5] Internet Explorer 11.0支援-webkit prefixed variant as an alias for the default one.

參見

• 使用 CSS Transforms
• <translation-function> 資料型態
• More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
• 跨瀏覽器 2D transform plugin for jQuery