mozilla
您的搜索结果

    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

    文档标签和贡献者

    此页面的贡献者有: OoOoOoOo, lmorchard, leeli, ethertank, teoli
    最后编辑者: teoli,