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
Eureka! 
One thought on “CSS3 – Text Rotation by 3D Transforms”