CSS: Rotate Text / Image Elements by 90, 180 or 270 Degrees

by Yang Yang on August 25, 2009

As a quick digest of this article by Jonathan. You can literally rotate any HTML element by a certain degree with CSS, be it text or image or something else. After testing across a few modern browsers, the only one that’s not supporting this rotation technique is Opera.

The CSS rules you need for a rotation of 90 degrees:

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

That’s it.