Style transform 属性

定义和用法

transform 属性将 2D 或 3D 转换应用于元素。此属性允许您对元素进行旋转、缩放、移动、倾斜等。

另请参阅：

CSS 参考手册：transform 属性

实例

旋转 div 元素：

document.getElementById("myDIV").style.transform = "rotate(7deg)";

亲自试一试

语法

返回 transform 属性：

object.style.transform

设置 transform 属性：

object.style.transform = "none|transform-functions|initial|inherit"

属性值

值 描述
none 定义不应有转换。
matrix(n, n, n, n, n, n) 使用六个值的矩阵定义二维转换。
matrix3d(n, n, n, n, etc....) 使用 16 个值的 4x4 矩阵定义 3D 转换。
translate(x, y) 定义 2D 平移。
translate3d(x, y, z) 定义 3D 平移。
translateX(x) 定义平移，仅使用 X 轴的值。
translateY(y) 定义平移，仅使用 Y 轴的值。
translateZ(z) 定义 3D 平移，仅使用 Z 轴的值。
scale(x, y) 定义 2D 比例转换
scale3d(x, y, z) 定义 3D 比例转换。
scaleX(x) 通过给 X 轴一个值来定义比例转换。
scaleY(y) 通过给 Y 轴一个值来定义比例转换。
scaleZ(z) 通过给 Z 轴一个值来定义 3D 比例转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x, y, z, angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
skew(x-angle, y-angle) 定义沿 X 轴和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿 Y 轴的 2D 倾斜转换。
perspective(n) 定义 3D 转换元素的透视图。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： 无
返回值： 字符串，表示元素的 transform 属性。
CSS 版本： CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0