style transform 属性

示例

旋转 div 元素：

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

亲自试一试 »

描述

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

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
transform	36.0	10.0	16.0	9.0	23.0

语法

返回变换属性：

object.style.transform

设置变换属性：

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

属性值

Value	Description
none	Defines that there should be no transformation
matrix(n, n, n, n, n, n)	Defines a 2D transformation, using a matrix of six values
matrix3d(n, n, n, n, etc....)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x, y)	Defines a 2D translation
translate3d(x, y, z)	Defines a 3D translation
translateX(x)	Defines a translation, using only the value for the X-axis
translateY(y)	Defines a translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale(x, y)	Defines a 2D scale transformation
scale3d(x, y, z)	Defines a 3D scale transformation
scaleX(x)	Defines a scale transformation by giving a value for the X-axis
scaleY(y)	Defines a scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x, y, z, angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
skew(x-angle, y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis
perspective(n)	Defines a perspective view for a 3D transformed element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

技术细节

默认值：	没有任何
返回值：	一个字符串，表示元素的变换属性
CSS版本	CSS3

码农教程 - 一技在手,衣食无忧!

style transform 属性

示例

描述

浏览器支持

语法

属性值

技术细节

相关页面