如何将 <div> 旋转 90 度？

Question

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

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

我怎样才能做到这一点？

原文由 user1808433 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要 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>

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

注意： -o- 和 -moz- 前缀 不再相关，可能不需要。 IE9 需要 -ms- Safari 和 Android 浏览器需要 -webkit-

---

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

原文由 Dziad Borowy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 عثمان غني 发布，翻译遵循 CC BY-SA 3.0 许可协议