Rotate Text using CSS

While developing web pages we some time require to rotate text of images present in our content to certain degree for an instance 90 degree. For this we can use css to do that work. Simply add following code in your css

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 .rotate {
  /*text-align:left;*/

/* 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);

}

Above case is to rotate to -90 degree. Now you can simply include class rotate to your html element to rotate it as shown in example given below.

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 <div class='rotate'>CodeZone.IN</div>

Now open your web page… tada…. Your HTML element is rotated…

 

Leave a Reply