如何将 <div> 旋转 90 度？答案

【问题标题】：How to rotate a <div> 90 degrees?如何将 <div> 旋转 90 度？
【发布时间】：2012-12-23 09:20:47
【问题描述】：

我有一个<div>，我想旋转 90 度：

<div id="container_2"></div>

我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

使用css“rotate()”方法：

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#rotate{
  transform: rotate(90deg);
}

<div>
normal div
</div>
<br>

<div id="rotate">
This div is rotated 90 degrees
</div>

【讨论】：

【解决方案2】：

我们可以将以下内容添加到 CSS 中的特定标签中：

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

如果半旋转将90更改为45。

【讨论】：

【解决方案3】：

你需要 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);
}

&lt;div id="container_2"&gt;&lt;/div&gt;

（demo中有45度旋转，可以看到效果）

注意： -o- 和 -moz- 前缀是 no longer relevant and probably not required。 IE9 需要-ms- 而Safari 和Android 浏览器需要-webkit-

2018 年更新：不再需要供应商前缀。只有transform 就足够了。（感谢@rinogo）

【讨论】：

另外，确保它是一个块

【解决方案4】：

你可以使用 css3 属性 writing-mode 写作模式：tb-rl

css-tricks

mozilla

【讨论】：

【解决方案5】：

使用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);
}

&lt;div id="container_2"&gt;This box should be rotated 90&amp;deg; on hover.&lt;/div&gt;

点击“Run code sn-p”，然后将鼠标悬停在框上即可查看转换效果。

实际上，不需要其他前缀条目。见Can I use CSS3 Transforms?

【讨论】：

这会更好地作为现有答案下的评论......或对现有答案进行编辑，说明可能不需要其他前缀。有 3 个几乎完全相同的答案是没有帮助的。
@Zaz 即使在我悬停后如何保持框旋转？
@ayushsharma：使用 JS 或查看Make CSS Hover state remain after “unhovering”：一个黑客建议有#element{transition: 9999999s}（这使得恢复正常的过渡需要永远）和#element:hover{transition: .3s}（或者无论你想要多久轮换采取）。

【解决方案6】：

在您的 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);
}

【讨论】：

作为对所有未来读者的建议：始终将前缀规则放在标准定义之前。在这种情况下，所有以浏览器为前缀的规则都应位于 transform: rotate(90deg); 规则之前。原因通常是，您希望标准优先，而在 CSS 中，最后一个定义总是胜出。