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

Question

我创建了这个页面以便更好地理解这个问题.正如您可以看到的那样,我们可以使用CSS3围绕X,Y或Z轴旋转元素transform: rotate[XYZ](M deg/rad).

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

如果你不理解它,请手拿一张纸并从它的两个角落翻转(for y=x或y=-x).或者看看这张照片.

我猜它会是两个旋转的组合,但我不知道如何计算旋转.

更新:

我不知道rotate3dCSS 有什么功能transform.这个函数接受四个参数rx,ry,rz和deg.我觉得这对这个问题非常有帮助.

其他的事情是当我们改变translate[X,Y,Z]它实际上改变旋转的起源.这意味着如果你想转动Y=10px你应该translateZ改为10px

UPDATE2:

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

Answer 1

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

该函数接受四个参数，其中前三个是，x最后一个是旋转。据我了解这个函数是如何工作的，你可以将你的线线性代数函数转换成这样：yzrotate3d

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

我创建了这个小应用程序来演示如何rotate3d工作。