HTML DOM Style transform property
Examples
Rotation div element:
document.getElementById("myDIV").style.transform="rotate(7deg)";
try it"
Definition and Usage
transform attribute applied to the element 2D or 3D conversion. This property allows you to elements rotate, zoom, move, or tilt.
Browser Support
Firefox and Internet Explorer 10 support transform property.
Internet Explorer 9 supports another alternative of the property attribute that msTransform property (only for 2D conversion).
Opera, Chrome and Safari support another alternative of the property attribute that WebkitTransform property (can be used for 3D and 2D conversion).
grammar
Returns transform properties:
object .style.transform
Setting transform properties:
object .style.transform="none|transform-functions|initial|inherit"
Property Value
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| 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 。 |
technical details
| Defaults: | none |
|---|---|
| return value: | String representing the transform attribute of the element. |
| CSS version | CSS3 |
related articles
CSS Reference Manual: the Transform property