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;
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 <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
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轴平移指定距离
浏览器兼容性
提示
ie5或以上版本支持 matrix filter 属性完成相同的效果。
在ie9中，使用jquery动态添加样式，不显示效果，其他浏览器显示正常。是因为ie9认为 -ms-transform是无效的脚本，不执行。请将 -ms-transform改为“mstransform”。
更多css中transform 属性。