是否可以在 x、y、z 轴上旋转 div？答案

【问题标题】：Is it possible to rotate a div on x,y,z axises?是否可以在 x、y、z 轴上旋转 div？
【发布时间】：2020-11-05 16:55:43
【问题描述】：

我不知道这是否可能，但我对此一无所知，所以我决定问一下。是否可以使用 jQuery 之类的 JavaScript 库或类似的东西在 x,y,z 轴上旋转 div？

谢谢

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以通过 x 和 y 定位（CSS 中的left 和top 属性）。

您需要有position: absolute 或静态以外的其他内容。

您还可以更改 z 顺序（堆叠高度）。除了position: static（默认）之外，它还可以与其他东西一起使用。

但是，使用 CSS3，您可以旋转 div。

#my-div {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
}

【讨论】：

这只是在 Y 轴上旋转 div，X,Z 轴呢？
你的意思是旋转进入页面？喜欢歪斜吗？可能需要为此使用 Canvas。

【解决方案2】：

有一个 jQuery 插件可以旋转（使用另一个答案中描述的转换），但它不适用于 IE。

如果您有兴趣，请查看here。

如果您想旋转图像，this plugin 将适用于所有浏览器。

【讨论】：

【解决方案3】：

AFAIK，不。暂时没有什么我知道可以实现的。要模拟 3D 旋转，最接近的方法是通过一些 javascript 画布操作库来实现。前几天我碰巧找到了Javascript 3D renderer。如果您有兴趣，请查看它。但是，您应该知道，即使 Canvas 3d JS Library 可用，我们也无法使 div（画布外）以 3D 方式旋转。

【讨论】：

【解决方案4】：

此 jQuery 插件适用于图像，您可以将其与 div 一起使用

link

【讨论】：

如何在X轴上旋转div？？