旋转div元素 [英] Rotating a div element

问题描述

可以使用Javascript&不使用HTML 5？

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

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

解决方案

旧问题，但答案可能会帮助某人...

如何使用CSS将元素旋转45度的示例：使用CSS在所有主要浏览器中使用专有的CSS标记旋转元素

  .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，但它是更多的pernickety在什么情况下它支持他们（越来越难以关心8）。

Is it possible to rotate a div element using Javascript & NOT using HTML 5?

If so what attributes of the element do I set/change to make it rotate? Ie, div.what?

PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

解决方案

Old question, but the answer might help someone...

You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).

Example of how to rotate a element 45 degrees using CSS:

.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 */
}

Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.

I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

这篇关于旋转div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！