我创建了这个
page,以便更好地理解这个问题.正如你可以看到使用CSS3,我们可以使用transform：rotation [XYZ](M deg / rad)旋转X,Y或Z轴周围的一个元素.
但是我正在寻找一个函数来旋转任何给定行上的元素.例如,在x = y行上旋转元素.或甚至更复杂y = 2x 3.
如果您不明白,请握住手中的纸张,并将其从两个远角转换(y = x或y = -x).或看这张照片.
我猜这将是两轮的组合,但我不知道如何计算轮换.
更新：
我不知道有一个用于CSS变换的rotate3d函数.此函数接受四个参数rx,ry,rz和deg.我觉得这对于这个问题是非常有帮助的.
其他的事情是当我们改变[X,Y,Z]时,它实际上改变了旋转的起点.这意味着如果你想围绕Y = 10px旋转,你应该将translateZ更改为10px
UPDATE2：
我的实际目标是创建一个使用GUI应用CSS变换属性的工具.正如你可以在我的jsbin文件中看到的.我想把它扩展到你可以做的任何变化.其中一个是旋转.我确定可以围绕其他行旋转一个元素,而不是x = 0 …但我不知道如何进行计算.例如,围绕Y的旋转45度和围绕Z的45度的旋转与围绕x = y的旋转45度相同.我需要一个空间中所有行的解决方案.
解决方法
我建议阅读文章的介绍
Rotation About an Arbitrary Axis in 3 Dimensions.基本情况是：
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).
