JavaScript HTML DOM Style transform 属性

• 

  transform 属性

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

  旋转div元素：

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

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  transform	10.0 9.0 msTransform	36.0+	16.0+	不支持 用 WebkitTransform	23.0+

• 

  语法

  返回transform属性：

  object.style.transform

  设置transform属性：

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

  属性值

  值	描述
  none	定义不应该进行转换
  matrix(n, n, n, n, n, n)	使用六个值的矩阵定义2D变换
  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)	仅使用Z轴的值定义3D平移
  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的信息

• 

  技术细节

  项目	描述
  默认值：	none
  返回值：	一个字符串，表示元素的transform属性
  CSS版本	CSS3

• 

  相关页面

  CSS参考：CSS transform 属性