[html] How can I rotate an HTML <div> 90 degrees?

I have a <div> that I want to rotate 90 degrees:

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

How can I do this?

Use following in your 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);
} 

Use the css "rotate()" method:

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>

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

css-tricks

mozilla

Use transform: rotate(90deg):

#container_2 {_x000D_
    border: 1px solid;_x000D_
    padding: .5em;_x000D_
    width: 5em;_x000D_
    height: 5em;_x000D_
    transition: .3s all;  /* rotate gradually instead of instantly */_x000D_
}_x000D_
_x000D_
#container_2:hover {_x000D_
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */_x000D_
    -ms-transform: rotate(90deg);      /* to support IE 9 */_x000D_
    transform: rotate(90deg);_x000D_
}

<div id="container_2">This box should be rotated 90&deg; on hover.</div>

Click "Run code snippet", then hover over the box to see the effect of the transform.

Realistically, no other prefixed entries are needed. See Can I use CSS3 Transforms?

We can add the following to a particular tag in CSS:

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

In case of half rotation change 90 to 45.