CSS中transform 属性

CSS中transform 属性允许你修改CSS可视化模型的坐标空间。通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。 

如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position: fixed 元素的包含块（a containing 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;

如何阅读 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 类型表示距离测度。它是一个后紧随一个长度单位（px，em，px，in，mm，...）。和任何 CSS 尺寸一样，数字和单位之间没有空格。0之后的长度单位是可选的。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length"  target="_blank"><length> value for tx and ty.
Webkit (Safari, Chrome) and Opera currently support a unitless  CSS 数据类型代表一个数字，可为整数或小数。它的语法扩展了的数据值。要表示一个小数则加上小数部分 -- “."后跟一或多为十进制数字--到任何数据值。像数据类型一样，没有任何单位，并不是一个CSS尺寸。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/number"  target="_blank"><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

提示

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. 0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective" target="_blank">perspective

   3. perspective-origin

   4. transform

   5. transform-box

   6. transform-origin

   7. transform-style

6. Data types

   1.   表示一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function"  target="_blank">transform-function

2005-2016 Mozilla 开发者网络及各贡献者