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

浏览器支持

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

ChromeEdgeFirefoxSafariOpera
ChromeEdgeFirefoxSafariOpera
36.010.016.09.023.0