旋转div元素

Question

是否可以使用Javascript&NOT使用HTML 5旋转div元素？

如果是这样,我设置/更改元素的哪些属性以使其旋转？即,div.什么？

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'" - 这对于避免裁剪结果至关重要.

我相当确定Matrix变换(至少在一定程度上)也支持在MSIE 6中,但它在什么情况下支持它们更加不安全(而且越来越难以关注8).

Answer 2

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

\n\n

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

\n\n

欲了解更多信息，请谷歌搜索：cssrotate

\n\n

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

\n