javascript 旋转 div 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5253084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating a div element
提问by Mach
Is it possible to rotate a div element using Javascript & NOT using HTML 5?
是否可以使用 Javascript 而不是使用 HTML 5 旋转 div 元素？
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
如果是这样，我应该设置/更改元素的哪些属性以使其旋转？即，div.what？
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.
PS：当我说旋转时，我的意思是围绕轴旋转图像，并不是每 x 毫秒显示不同的图像旋转。
回答by Iain Collins
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).
您可以在所有主要浏览器中使用专有 CSS 标记来旋转元素（尽管术语 HTML5 在这里并不是特别相关）。
Example of how to rotate a element 45 degrees using CSS:
如何使用 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 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
是的，MSIE 语法就是那么可怕。请注意“sizingMethod='auto expand'”——这对于避免结果被裁剪至关重要。
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).
我相当确定 MSIE 6 也支持矩阵变换（至少在某些方面），但它在什么情况下支持它们更加挑剔（并且越来越难以关心 8）。
回答by rsp
Yes, it is possible to rotate a div not using HTML5, but using CSS3.
是的，可以不使用 HTML5，而是使用 CSS3 来旋转 div。
You can experiment with CSS rotation on CSS3 Please(toggle the .box_rotate rule on).
你可以在CSS3 Please上试验 CSS 旋转（打开 .box_rotate 规则）。
For more info, Google for: css rotate
有关更多信息，请谷歌：css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Rapha?l.
如果您想要一种在所有浏览器（包括 IE6）上都可以旋转文本的方法，请尝试Rapha?l。
回答by Ashwin Krishnamurthy
回答by Daimon Kaisar
You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
您可以在 IE 中使用 Matrix 来完成。这是一个以跨浏览器方式解决它的函数。
回答by Bob
If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can putelement.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";
如果您正在寻找一种立即完成的方法，那么您可以使用
element.style.transform = "rotateZ(90deg");
确保在 CSS 语句周围使用引号。
如果你想要它的持续时间，比如说，一秒钟（我知道你不想要这个，反正我只是在做），你可以把element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";
