Question

是否可以使用Javascript＆amp; amp;旋转div元素不使用HTML 5？

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

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

Answer 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中也支持Matrix转换（至少在某种程度上），但在它支持它们的情况下它更加谨慎（并且越来越难以关注8）。

Answer 2

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

您可以在CSS3 Please上试验CSS轮播（切换.box_rotate规则）。

有关详情，Google for：css rotate

如果您想要一种旋转文本适用于所有浏览器（包括IE6）的方法，请尝试Raphaël。

Answer 3

我知道我迟到了。为了后人的缘故，我想发帖this：这个网站非常好，它甚至可以为相应的css3对应物执行矩阵变换

Answer 4

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

http://kaisarcode.com/javascript-rotate

Answer 5

如果您正在寻找一种即时执行此操作的方法，则可以使用 element.style.transform = "rotateZ(90deg");
确保在CSS语句周围使用引号。

如果要在一秒钟的时间内使用它（我知道您不想要它，反正我只是在做），您可以放下
element.style.transition = "1s"; element.style.transform = "rotateZ(90deg)";

旋转div元素

5 个答案: