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
Thanks!, it’s really good… helped me alot 😀
LikeLike
Good to know that i could help. =D
LikeLike