CSS rotate3d() 函数

定义和用法

CSS rotate3d() 函数定义了元素的 3D 旋转。

rotate3d() 函数在 transform 属性中使用。

实例

例子 1

使用 rotate3d() 旋转多个

元素：

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

亲自试一试

例子 2

使用 rotate3d() 旋转图像：

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

亲自试一试

CSS 语法

rotate3d(x, y, z, angle)
值 描述
x 正数或负数，定义沿 x 轴的旋转。
y 正数或负数，定义沿 y 轴的旋转。
z 正数或负数，定义沿 z 轴的旋转。
angle

必需。指定旋转角度。可能的单位：

  • deg（度）
  • rad（弧度）
  • turn（圈）

技术细节

版本： CSS Transforms Module Level 2

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Pangalia za kusoma

Mwongozo:Mbinu ya chukua ya CSS 3D

Tazama:Mwili wa transform wa CSS

Tazama:Hisia cha CSS rotate

Tazama:Funknzi ya rotate() ya CSS

Tazama:Funknzi ya rotateX() ya CSS

Tazama:Funknzi ya rotateY() ya CSS

Tazama:Funknzi ya rotateZ() ya CSS