How to rotate a <div> 90 degrees?
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)
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);
}