MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。 

 CSS transform 属性 , 只对 block 级元素生效!

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

初始值none
适用元素transformable elements
是否是继承属性
Percentagesrefer to the size of bounding box
适用媒体visual
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea transform
正规顺序the unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

句法

transform 属性可以设置为none或者其他transform-function(见上面列表)值。

取值

<transform-function>
至少一个 CSS transform functions 被应用, 请看下面的示例.
none
指定为 不应用transform

示例

查看 Using CSS transforms.

标准语法(Formal syntax)

如何阅读 CSS 语法。

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> )

where
<length-percentage> = <length> | <percentage>

范例

参见 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

旋转

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轴平移指定距离

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support ? ? ? ?

提示

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

说明

另见

文档标签和贡献者

标签: 
 最后编辑者: codedrinker,