rotate3d指的是什么

这篇文章给大家分享的是有关rotate3d指的是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

　　rotate3d是什么

　　在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组[x,y,z]矢量定义，并且通过变换源点传递（即通过transform-originCSS属性定义）。如果这些矢量被赋予非标准值，即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) t

　　0 0 0 1

　　rotate3d示例

　　绕Y轴旋转

　　HTML
　　<div>Normal</div>
　　<divclass="rotated">Rotated</div>
　　CSS
　　body{
　　perspective:800px;
　　}
　　div{
　　width:80px;
　　height:80px;
　　background-color:skyblue;
　　}
　　.rotated{
　　transform:rotate3d(0,1,0,60deg);
　　background-color:pink;
　　}

感谢各位的阅读！关于“rotate3d指的是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！