CSS, CSS3

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

3 Comments

Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.

  * {
    -webkit-transform: translate3d(0,0,0);
  }


 

Here is the updated example from CSS3 – Text Rotation by 3D Transforms

<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;
      }
      
      * {
        -webkit-transform: translate3d(0,0,0);
      }
    </style>
  </head>
  <body>
    <p id="rotate"><span>Eureka!</span></p>
  </body>
</html>

 

Check it out again~

For Firefox which uses the Gecko engine, the anti-aliasing is enabled by default but the effect varies among different Firefox versions.

For Internet Explorer, LET’S FORGET ABOUT IT. =P

Done =)

Reference: StackOverflow – Improve css3 text rotation quality

Advertisements

3 thoughts on “CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing”

  1. Pingback: CSS3 – Text Rotation by 3D Transforms | Eureka!

Leave a Reply

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

Gravatar
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 )

Cancel

Connecting to %s