如何将<div>旋转90度？

Question

我有一个<div>，我希望将其旋转90度：

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

我该怎么做？

- user1808433

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>

（演示中有45度旋转，因此您可以看到效果）

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

---

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

- Dziad Borowy

---

also, make sure its a block - chovy

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

- عثمان غني

---

给所有未来读者的建议：无论何时都要将前缀规则放在标准定义之前。在这种情况下，所有浏览器前缀规则都应该在transform: rotate(90deg);规则之前。原因是通常你希望标准定义优先生效，在CSS中最后一个定义总是获胜。 - Jesse

Answer 3

使用 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&deg; on hover.</div>

点击“运行代码片段”，然后将鼠标悬停在盒子上，查看变换的效果。

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

- Zaz

---

这条评论最好放在现有答案下面...或者编辑现有答案，说明其他前缀可能不需要。拥有3个几乎完全相同的答案没有帮助。 - misterManSam

@Zaz，我该如何让方框在取消悬停后仍保持旋转状态？ - heyayush

@ayushsharma：使用JS或查看使CSS悬停状态保持“取消悬停”后的状态：那里建议的一个技巧是#element{transition: 9999999s}（这使得回到正常状态的过渡需要永远），以及#element:hover{transition: .3s}（或者您想要旋转花费多长时间）。 - Zaz

Answer 4

使用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>

- thisisnotshort

Answer 5

你可以使用 CSS3 属性writing-mode writing-mode: tb-rl

CSS-Tricks

Mozilla

- Ashraf

Answer 6

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

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

在进行半旋转更改时，将 90 更改为 45。

- subindas pm