285

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

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

How can I do this?

0

6 Answers 6

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)

1
  • 8
    also, make sure its a block
    – chovy
    Oct 22, 2014 at 6:35
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);
} 
1
  • 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, 2014 at 0: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?

3
  • 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. Apr 26, 2015 at 23:31
  • @Zaz how to keep the box rotated even after i unhover?
    – heyayush
    Aug 30, 2017 at 21:36
  • @ayushsharma: Use JS or see 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, 2017 at 23:54
6

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

css-tricks

mozilla

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>

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.