如何将 HTML <div> 旋转 90 度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14233341/
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
How can I rotate an HTML <div> 90 degrees?
提问by user1808433
I have a <div>that I want to rotate 90 degrees:
我有一个<div>我想旋转 90 度：
<div id="container_2"></div>
How can I do this?
我怎样才能做到这一点？
回答by Dziad Borowy
You need CSS to achieve this, e.g.:
您需要 CSS 来实现这一点，例如：
#container_2 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
Demo:
演示：
#container_2 {
width: 100px;
height: 100px;
border: 1px solid red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}<div id="container_2"></div>(There's 45 degrees rotation in the demo, so you can see the effect)
（演示中有45度旋转，可以看到效果）
Note:The -o-and -moz-prefixes are no longer relevant and probably not required. IE9 requires -ms-and Safari and the Android browser require -webkit-
注：该-o-和-moz-前缀不再相关，可能并不需要。IE9 需要-ms-，Safari 和 Android 浏览器需要-webkit-
Update 2018:Vendor prefixes are not needed anymore. Only transformis sufficient. (thanks @rinogo)
2018 年更新：不再需要供应商前缀。仅此transform而已。（感谢@rinogo）
回答by ????? ???
Use following in your CSS
在您的 CSS 中使用以下内容
div {
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-ms-transform: rotate(90deg); /* IE 9 */
-o-transform: rotate(90deg); /* Opera */
transform: rotate(90deg);
}
回答by Zaz
Use transform: rotate(90deg):
使用transform: rotate(90deg)：
#container_2 {
border: 1px solid;
padding: .5em;
width: 5em;
height: 5em;
transition: .3s all; /* rotate gradually instead of instantly */
}
#container_2:hover {
-webkit-transform: rotate(90deg); /* to support Safari and Android browser */
-ms-transform: rotate(90deg); /* to support IE 9 */
transform: rotate(90deg);
}<div id="container_2">This box should be rotated 90° on hover.</div>Click "Run code snippet", then hover over the box to see the effect of the transform.
单击“运行代码片段”，然后将鼠标悬停在框上以查看转换的效果。
Realistically, no other prefixed entries are needed. See Can I use CSS3 Transforms?
实际上，不需要其他前缀条目。请参阅我可以使用 CSS3 转换吗？
回答by Ashraf
you can use css3 property writing-modewriting-mode: tb-rl
您可以使用 css3 属性写作模式写作模式：tb-rl
回答by subindas pm
We can add the following to a particular tag in CSS:
我们可以将以下内容添加到 CSS 中的特定标签中：
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
In case of half rotation change 90to 45.
在半旋转的情况下更改90为45。
