How to Text Rotation in CSS

If what you are looking for is a way to set type vertically, you’re best bet is probably CSS writing-mode.

If you’re just trying to turn some text, you can rotate entire elements like this, which rotates it 90 degrees counterclockwise:

.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

See also  Creating Hover Effects with CSS3 Animations - hover.css

Leave a Reply

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