Text Rotation With CSS

Within the article I tell about Text Rotation With CSS. All of the major browsers support some kind of text rotation. For a cross-browser implementation, you have to include a number of CSS instructions and additionally, maybe even some JavaScript for positioning.
Just because you can rotate text every which way, be sure to think about whether it’s a good idea or not before throwing in a bunch of vertical text in your pages.

CSS Transform Object

The transform object property is an effect that lets you alter the shape, size and position an element. As an object, the transform property has methods to move, scale, turn, spin, and stretch elements any combination can devise. Moreover, it includes both 2D and 3D transformations. The bad news is that Transform is not supported in any browser. Instead, each vendor has their own version of it:

  • Internet Explorer supports the -ms-transform property.
  • Firefox supports the -moz-transform property.
  • Opera supports the -o-transform property.
  • Safari and Chrome support the -webkit-transform property.

Here is some code to render a DIV at a 270 degree angle:

  -ms-transform:rotate(270deg); /* IE 9 */
  -moz-transform:rotate(270deg); /* Firefox */
  -webkit-transform:rotate(270deg); /* Safari and Chrome */
  -o-transform:rotate(270deg); /* Opera */
<div><h3>Vertical Text</h3></div>

Supporting Internet Explorer 5.5 to 8

Unfortunately, the -ms-transform object is only supported as of Internet Explorer 9. For older versions dating back to 5.5, you can use Microsoft’s Filter object in some cases. It accepts an iRotation Integer which is limited to the following four values:

  • 0: The element is not rotated. (Default)
  • 1: The element is rotated 90 degrees.
  • 2: The element is rotated 180 degrees.
  • 3: The element is rotated 270 degrees.

Here’s an example:

<div style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
  <h3>Vertical Text</h3>

Multiple filters can be stacked in order to do more than just rotate the text. The following code blurs the text as well:

<div style="width:130px;height:50px;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)progid:DXImageTransform.Microsoft.Blur(pixelradius=2);">
  <h3>Vertical Text</h3>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *