html - 如何将 <div> 旋转 90 度？

Question

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

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

我该怎么做？

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- 前缀是 no longer relevant and probably not required . IE9 需要 -ms- 而 Safari 和 Android 浏览器需要 -webkit-

---

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