如何旋转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>

(演示中有45度旋转,所以你可以看到效果)

注:该-o-和-moz-前缀不再相关,可能并不需要.IE9要求-ms-和Safari和Android浏览器需要-webkit-

更新2018:不再需要供应商前缀.只够了transform.(谢谢@rinogo)

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

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>

单击"运行代码段",然后将鼠标悬停在该框上以查看转换的效果.

实际上,不需要其他带前缀的条目.请参阅我可以使用CSS3转换吗？

Answer 4

您可以使用 css3 属性writing-modewriting -mode: tb-rl

CSS 技巧

莫兹拉

Answer 5

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