CSS 三维变换

CSS 可以通过 transform 属性在二维空间或者三维空间移动、旋转、缩放和倾斜元素,本文讨论三维变换相关的函数。

CSS 可以通过 transform 属性在二维空间或者三维空间移动、旋转、缩放和倾斜元素,本文讨论三维变换相关的函数。

CSS 三维变换函数

通过 CSS transform 属性,您可以使用以下三维转换函数:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() 函数

rotateX() 函数让元素绕 X 轴旋转指定的角度。

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 函数

rotateY() 函数让元素绕 Y 轴旋转指定的角度。

#myDiv {
  transform: rotateY(150deg);
}

rotateZ() 函数

rotateZ() 函数让元素绕 Z 轴旋转指定的角度。

#myDiv {
  transform: rotateZ(90deg);
}

三维变换的浏览器支持情况

表中列出了完全支持 transform 属性的第一个浏览器版本。

Property
transform 36.0 10.0 16.0 9.0 23.0