我有一个<div>我想旋转90度：
<div id="container_2"></div>
我怎样才能做到这一点？
如何将HTML
旋转90度？</p>
第3676篇《如何将HTML
旋转90度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>
共5个回答
您需要CSS来实现此目的，例如：
#container_2 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
演示：
#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>（演示中旋转了45度，因此您可以看到效果）
注：该-o-和-moz-前缀不再相关，可能并不需要。IE9需要，-ms-而Safari和Android浏览器需要-webkit-
更新2018：不再需要供应商前缀。仅transform足够。（感谢@rinogo）
用途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>单击“运行代码段”，然后将鼠标悬停在框上以查看转换的效果。
实际上，不需要其他前缀条目。请参阅我可以使用CSS3转换吗？
在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);
}
相似问题
问题类别
我们可以将以下内容添加到CSS中的特定标签：
如果旋转半圈，请更改
90为45。