CSS3 – Text Rotation by 3D Transforms

Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

We can rotate text by using the CSS3 transform.

To rotate a text in clockwise direction with 45 degree:

p {
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE 9 */
  -o-transform: rotate(45deg);      /* Opera */
  transform:rotate(7deg);
}

 

Here is an example which demonstrates text rotation.

<html>
  <head>
    <style type="text/css">
      #rotate {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        background-color: #6C6;
        font-family: Arial;
      }
    </style>
  </head>
  <body>
    <p id="rotate"><span>Eureka!</span></p>
  </body>
</html>

 

Check it out~

 

Done =)

Reference: W3Schools – CSS3 3D Transforms

About these ads

One thought on “CSS3 – Text Rotation by 3D Transforms

  1. Pingback: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing | Eureka!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s