HTML DOM style transformer la propriété

Exemples

Rotation élément div:

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

Définition et utilisation

transformer l'attribut appliqué à la 2D de l'élément ou de la conversion 3D. Cette propriété vous permet d'éléments tournent, zoom, déplacement ou inclinaison.

support du navigateur

10 support de Firefox et Internet Explorer transforment la propriété.

Internet Explorer 9 prend en charge une autre variante de la propriété attribut que la propriété msTransform (seulement pour la conversion 2D).

Opera, Chrome et Safari supporte une autre variante de l'attribut de propriété qui WebkitTransform propriété (peut être utilisé pour la 3D et 2D conversion).

grammaire

Retours transforment les propriétés:

object .style.transform

Définition des propriétés de transformation:

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

Valeur de la propriété

值	描述
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 。