273

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

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

我怎样才能做到这一点？

4

6 回答 6

505

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

于 2013-01-09T10:41:04.427 回答
32

在您的 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);
}
于 2013-01-09T10:50:19.523 回答
15

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

单击“运行代码片段”，然后将鼠标悬停在该框上以查看转换的效果。

实际上，不需要其他前缀条目。请参阅我可以使用 CSS3 变换吗？

于 2015-04-26T22:19:04.300 回答
4

you can use css3 property writing-mode writing-mode: tb-rl

css-tricks

mozilla

于 2017-08-19T02:29:42.703 回答
3

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

于 2020-10-15T06:37:03.813 回答
1

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

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

在半旋转的情况下更改90为45。

于 2017-06-17T12:18:01.863 回答