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

【问题标题】：How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?如何使用 CSS3 围绕 X=0、Y=0 和 Z=0 以外的线旋转元素？
【发布时间】：2011-09-29 22:42:58
【问题描述】：

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

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

如果您不明白，请拿着一张纸从两个较远的角落翻转（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 度相同。我需要空间中所有线条的解决方案。

【问题讨论】：

任何轴上的所有旋转都可以定义为 X、Y 和 Z 轴上的旋转 - 这只是一个数学问题。维基百科有something to start with。 :)
您是否尝试使用 javascript 创建 M 理论模型？ :)
3D 空间中的任何一条线都可以作为旋转轴。想想 x=y 线。请重新打开我的问题。我会添加更多细节
我们不在 3D 空间中。 HTML 文档本质上是 2D 的，因此您可以旋转的只是一个点。 3D transforms 完全不同...
当你说“旋转”时，你是真的指旋转任意角度（这样得到的图形可以位于平面之外）还是简单的意思是翻转（即 reflection) 越过这条线。后一种情况要简单得多。

标签： math css

【解决方案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).

【讨论】：

【解决方案2】：

我要问的问题的解决方案是 css 转换函数，rotate3d。使用这个函数，我们可以围绕 3D 空间中的任何线旋转 DOM 元素。

这个函数接受四个参数，前三个是x、y 和z，最后一个是旋转。据我了解此函数的工作原理，您可以将您的线线性代数函数转换为rotate3d，如下所示：

如果你有一个像1x + 2y + 3z = 0 这样的线函数并且想要将你的元素旋转30度，那么你应该将此css属性应用于元素； transform: rotate3d(1, 2, 3, 30deg);。

我创建了this 小应用程序来演示rotate3d 的工作原理。

【讨论】：

【解决方案3】：

我相信我明白你的意思。所以，如果你知道 Photoshop，当你旋转图像时，你可以选择一个锚点。这是同样的想法。因此，您将代码 rotation-point: 50% 50% 添加到类中。唯一的问题是，任何浏览器尚不接受旋转点，但很快就会接受。我想你应该知道这最终会成为可能。 here了解更多

【讨论】：

我不想围绕一个点旋转。任何现代浏览器都支持 CSS3 transform-origin。旋转点似乎被拒绝了
我只是说它可能不受支持。但是你可能需要使用%的