math - 如何使用 CSS3 围绕 X=0、Y=0 和 Z=0 以外的线旋转元素？

Question

我创建了这个 page 以便更好地理解问题。如您所见，使用 CSS3 我们可以使用 transform: rotate[XYZ](M deg/rad) 围绕 X、Y 或 Z 轴旋转元素。

但我正在寻找一个函数来旋转任何给定行上的元素。例如，在 x=y 行旋转元素。甚至更复杂的 y=2x+3。

如果您不明白，请将一张纸拿在手上，从两个较远的 Angular 翻转它(对于 y=x 或 y=-x)。或者看看这张图片。

我猜这是两个旋转的组合，但我不知道如何计算旋转。

更新:

我不知道 CSS transform 有一个 rotate3d 函数。此函数接受四个参数 rx、ry、rz 和 deg。我觉得这对解决这个问题很有帮助。

另一件事是当我们改变 translate[X,Y,Z] 它实际上改变了旋转的原点。这意味着如果你想围绕 Y=10px 旋转，你应该将 translateZ 更改为 10px

更新2:

我的实际目标是创建一个使用 GUI 应用 CSS 转换属性的工具。正如您在我的 jsbin 文件中看到的那样。我想将它扩展到您可以做的任何 transform 。其中之一是旋转。我确定可以围绕 x=0 之外的其他行旋转元素...但我不知道如何进行计算。例如围绕 Y 旋转 45 度和围绕 Z 旋转 45 度与围绕 x=y 旋转 45 度相同。我需要空间中所有线路的解决方案。

Answer 1

我建议阅读文章的介绍 Rotation About an Arbitrary Axis in 3 Dimensions .基础知识是:

(1) Translate space so that the rotation axis passes through the origin.
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane.
(3) Rotate space about the y axis so that the rotation axis lies along the z axis.
(4) Perform the desired rotation by θ about the z axis.
(5) Apply the inverse of step (3).
(6) Apply the inverse of step (2).
(7) Apply the inverse of step (1).