All for Joomla All for Webmasters

Let's Play With Coding…

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…

 

Related posts

Delete A Repository in BitBucket

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.

ASCII to HEX Convertion in PHP

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.

Simple Site Maintenance HTML Page

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.

International Calling Codes

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.

Don’t charge your phone overnight

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.

Use Font Awesome anywhere you wish

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.

Simulate Mobile Device In Chrome

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.

Leave a Comment

Leave a Reply