284

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

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

How can I do this?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
user1808433
  • 3,325
  • 4
  • 16
  • 17

6 Answers6

520

You need CSS to achieve this, e.g.:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Demo:

#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>

(There's 45 degrees rotation in the demo, so you can see the effect)

Note: The -o- and -moz- prefixes are no longer relevant and probably not required. IE9 requires -ms- and Safari and the Android browser require -webkit-

Update 2018: Vendor prefixes are not needed anymore. Only transform is sufficient. (thanks @rinogo)

Dziad Borowy
  • 12,368
  • 4
  • 41
  • 53
32

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);
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
عثمان غني
  • 2,786
  • 4
  • 52
  • 79
  • 40
    Just as a suggestion to all future readers: always place the prefixed rules **before** the standards definition. In this case, all browser-prefixed rules should be before the `transform: rotate(90deg);` rule. The reason would be that typically, you want the standards to take precedence, and in CSS the last definition always wins. – Jesse Apr 14 '14 at 00:12
17

Use 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>

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?

Zaz
  • 46,476
  • 14
  • 84
  • 101
  • 1
    This would be better as a comment under an existing answer... or make an edit to an existing answer stating that the other prefixes are probably not needed. Having 3 pretty much exactly the same answers is unhelpful. – misterManSam Apr 26 '15 at 23:31
  • @Zaz how to keep the box rotated even after i unhover? – heyayush Aug 30 '17 at 21:36
  • @ayushsharma: Use JS or see [Make CSS Hover state remain after “unhovering”](https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering): One hack suggested there is `#element{transition: 9999999s}` (which makes the transition back to normal take forever) and `#element:hover{transition: .3s}` (or however long you want the rotation to take). – Zaz Aug 30 '17 at 23:54
6

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>
thisisnotshort
  • 342
  • 3
  • 11
5

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

css-tricks

mozilla

Ashraf
  • 717
  • 6
  • 11
1

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.

Tiago Martins Peres
  • 14,289
  • 18
  • 86
  • 145
subindas pm
  • 2,668
  • 25
  • 18