rotate3d() CSS函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。

在3D空间之中,旋转有3个自由维度,描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义,并且通过变换源点传递(即通过 transform-origin CSS 属性定义)。如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和 [0, 0, 0],将会使旋转不起作用,但是不影响整个CSS属性的其他效果(译者注:如transform中的多项变换)。

与平面旋转相反的是,3D旋转的组合通常是不可交换的;这意味着定义旋转规则的值的顺序是严格控制的。

语法

rotate3d(x, y, z, a)

取值

x
 <number> 类型,可以是0到1之间的数值,表示旋转轴X坐标方向的矢量。
y
<number> 类型, 可以是0到1之间的数值,表示旋转轴Y坐标方向的矢量。
z
<number> 类型, 可以是0到1之间的数值,表示旋转轴Z坐标方向的矢量。
a
 <angle> 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。
笛卡尔坐标 on ℝ2 齐次坐标 on ℝℙ2 笛卡尔坐标 on ℝ3 齐次坐标 on ℝℙ3
这种变换应用于3D空间,不可用于平面空间 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001

示例

围绕X轴旋转

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotate3d(1, 0, 0, 60deg);
  background-color: blue;
}

效果

围绕自定义轴旋转

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: blue;
}

效果

文档标签和贡献者

 此页面的贡献者: AozakiOrenji, xgqfrms-GitHub, Serifx
 最后编辑者: AozakiOrenji,