transform

概览

CSS中transform 属性允许你修改CSS可视化模型的坐标控件。使用transform,元素可以安装设定的值变形、旋转、缩放、倾斜。

语法

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

Vendor prefixes: 如果您需要使用此功能,请查看浏览器兼容性列表,获取各个浏览器供应商的前缀。

transform-function
一个或多个 CSS transform functions 被应用, 请看下面的示例.
none
指定的没有transform

示例

查看 Using CSS transforms.

在线示例

pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(20deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    -ms-transform: translate(100px) rotate(20deg);
    -ms-transform-origin: 60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}

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

浏览器兼容性

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

说明

See also

Document Tags and Contributors

Contributors to this page: OoOoOoOo, lmorchard, leeli, ethertank
最后编辑者: ethertank,