rotate3d()CSS函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义;如果为正,运动将为顺时针,如果为负,则为逆时针。
rotate3d是什么
在3D空间之中,旋转有3个自由维度,描述了旋转轴。旋转轴由一组[x,y,z]矢量定义,并且通过变换源点传递(即通过transform-originCSS属性定义)。如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和[0,0,0],将会使旋转不起作用,但是不影响整个CSS属性的其他效果(译者注:如transform中的多项变换)。
与平面旋转相反的是,3D旋转的组合通常是不可交换的;这意味着定义旋转规则的值的顺序是严格控制的。
语法
rotate3d(x,y,z,a)
值
x
y
z
a
笛卡尔坐标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) t
0 0 0 1
rotate3d示例
绕Y轴旋转
HTMLNormalRotated