旋转 div 元素

Posted 2023-05-08

【中文标题】旋转 div 元素

【英文标题】：Rotating a div element

【发布时间】：2011-07-12 07:18:56

【问题描述】：

是否可以使用 javascript 而不是使用 html 5 来？

如果是这样，我应该设置/更改元素的哪些属性以使其旋转？即，div.what？

PS：当我说旋转时，我的意思是围绕轴旋转图像，并不是每 x 毫秒显示不同的图像旋转。

【问题讨论】：

排除 HTML5 是否也排除了 CSS3？

好吧，我排除了 HTML5，因为它不适用于所有浏览器，所以如果 CSS3 可以在所有浏览器上运行（是吗？）那么我会使用它。

***.com/questions/382591/…

IE 与 CSS3 和 HTML5 不完全兼容，尤其是 IE9 之前的版本

HTML 5 和 CSS3 在我的书中不存在，直到每个主流浏览器都支持它们。

【参考方案1】：

老问题，但答案可能对某人有所帮助......

您可以在所有主流浏览器中使用专有的 CSS 标记来旋转元素（但 HTML5 一词在这里并不特别相关）。

如何使用 CSS 将元素旋转 45 度的示例：

.example 
    -webkit-transform: rotate(45deg); /* Chrome & Safari */
    -moz-transform: rotate(45deg); /* Firefox */
    -ms-transform: rotate(45deg); /* IE 9+ */
    -o-transform: rotate(45deg); /* Opera */
    transform: rotate(45deg); /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */

是的，MSIE 语法就是这么可怕。请注意“sizingMethod='auto expand'” - 这对于避免结果被裁剪至关重要。

我相当确定在 MSIE 6 中也支持矩阵转换（至少在某些方面），但它在什么情况下支持它们更加棘手（而且越来越难以关心 8）。

【讨论】：

@Zanthel，没错！看看我的回答。 css3 到 IETransform。这家伙是个天才。

在过滤器方法中，您在哪里得出这些值..M11=0.7071...？如果我想改用 90deg，我该如何计算新值？

看看上面@Ashwin 发布的URL，它可以为你计算它们（该页面上还有一个指向博客文章的链接）。另一个选择是 css3pie.com

您可以使用this link 计算IE Matrix 值：

【参考方案2】：

是的，可以不使用 HTML5 而是使用 CSS3 来旋转 div。

您可以在 CSS3 Please 上试验 CSS 旋转（打开 .box_rotate 规则）。

更多信息，谷歌：css rotate

如果您想要一种可在所有浏览器（包括 IE6）上运行的旋转文本，请尝试Raphaël。

【参考方案3】：

我知道我迟到了。为了子孙后代，我想发帖this：这个网站很不错，它甚至为相应的css3对应物执行矩阵转换

【讨论】：

+！感谢您发布一个链接到自动生成矩阵变换的东西，回到这里来做这件事！ :)

【参考方案4】：

您可以在 IE 中使用 Matrix。这是一个以跨浏览器方式解决它的函数。

http://kaisarcode.com/javascript-rotate

【讨论】：

欢迎来到 Stack Overflow！请注意，这里不鼓励直接链接到您自己的网站/产品，原因有两个；首先，答案应该作为独立的答案发布，而不仅仅是指向外部站点的链接。其次，自我推销在这里往往不受欢迎，并且经常被标记为垃圾邮件（特别是如果没有披露您链接到自己的网站/产品）。

【参考方案5】：

如果您正在寻找一种即时完成的方法，那么您可以使用 element.style.transform = "rotateZ(90deg"); 确保在 CSS 语句周围使用引号。 如果你想要它超过一秒钟（我知道你不想要这个，我只是这样做），你可以输入 element.style.transition = "1s"; element.style.transform = "rotateZ(90deg)";