html transform优化,HTML Style transform用法及代码示例

HTML DOM中的样式转换属性用于转换对象。 transform属性允许旋转，缩放，移动，倾斜元素等。它可以使用2D或3D转换。

用法:

它返回transform属性。object.style.transform

它用于设置transform属性。object.style.transform = "none|transform-functions|initial|

inherit"

属性值：

值

描述

none

不进行任何转换。

matrix(x, x, x, x, x, x)

指定二维类型的矩阵转换。它需要6个值。

matrix3d(x, x, x, x, x, x, x, x, x)

指定3-D类型的矩阵转换。它需要9个值。

translate(x, y)

指定X和Y轴上的平移。

translate3d(x, y, z)

指定在X，Y和Z轴上的平移。

translateX(x)

仅指定沿X轴的平移。

translateY(y)

仅指定沿Y轴的平移。

translateZ(z)

仅指定沿Z轴的平移。

rotate(angle)

指定旋转角度。

rotateX(angle)

指定与旋转角度相对应的沿X轴的旋转。

roatateY(angle)

指定对应于旋转角度的沿Y轴的旋转。

roteteZ(angle)

指定对应于旋转角度的沿Z轴的旋转。

scale(x, y)

指定沿X和Y轴的比例转换。

scale3d(x, y, z)

指定沿X，Y和Z轴的比例转换。

scaleX(x)

指定沿X轴的比例转换。

scaleY(y)

指定沿Y轴的比例转换。

scaleZ(z)

指定沿Z轴的比例变换。

scale3d(x, y, z)

指定沿X，Y和Z轴的比例转换。

skew(angle, angle)

指定沿对应于倾斜角的X和Y轴的倾斜变换。

skewX(angle)

指定与偏斜角相对应的沿X轴的偏斜变换。

skewY(angle)

指定对应于偏斜角的沿Y轴的偏斜变换。

skewZ(angle)

指定与偏斜角相对应的沿Z轴的偏斜变换。

perspective(x)

指定元素的透视图。

initial

将元素初始化为其默认值。

inherit

从其父元素继承值。

范例1：本示例描述了元素的旋转。

HTML DOM Style transform Property

function myGeeks() {

document.getElementById("GFG").style.transform

= "rotate(90deg)";

}

#GFG {

margin:70px;

border:1px solid black;

width:220px;

height:80px;

background-color:#0f9d58;

text-align:center;

color:white;

}

Click Here!

GeeksforGeeks

输出：

之前单击按钮：

单击按钮后：

范例2：本示例描述了偏斜属性值。

HTML DOM Style transform Property

function myGeeks() {

document.getElementById("GFG").style.transform

= "skew(30deg, 30deg)";

}

#GFG {

margin:70px;

border:1px solid black;

width:220px;

height:80px;

background-color:#0f9d58;

text-align:center;

color:white;

}

Click Here!

GeeksforGeeks

输出：

之前单击按钮：

单击按钮后：

支持的浏览器：DOM样式转换属性支持的浏览器如下：

谷歌浏览器36.0

Internet Explorer 10.0，9.0毫秒

Firefox 16.0

Opera 23.0