理解 CSS rotate3d 旋转轴

【问题标题】：Understanding CSS rotate3d axis of rotation理解 CSS rotate3d 旋转轴
【发布时间】：2019-04-29 14:26:31
【问题描述】：

我无法理解 css rotate3d 方法。有人可以解释一下如何从 x、y 和 z 值中获得旋转轴，因为它们不是以度数给出的吗？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/transform-function/… + 一些数学.. 最后有一个角度，x,y,z 只定义轴The amount of rotation created by rotate3d() is specified by three <number>s and one <angle>. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation.
Flip a 3D card with CSS的可能重复

【解决方案1】：

3D 旋转均值在 3 个方向。首先，你必须了解Rotate。

#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

旋转Y()

#myDiv {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

旋转Z()

#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}

这只是一个例子，你使用这三个属性来进行 3D 旋转。

【讨论】：