How can I rotate an HTML <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);
}
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° 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?