How to rotate the text :using css3 transform

{ Published by Anirudh - On Wednesday, July 20, 2011 - 1 }




Now using css3 we can rotate the text, images and many more things by applying css 3 transform attribute and then using the text shadow technique we can give special effects to the text.




Rotating The Text

Using css3 transform attribute we can rotate the text to whatever extent we want.







How to use text-shadow and transform property?

LEFT VALUE: Here the value at the left side is 1px which gives text-shadow at right-side .To give shadow at left side change the sign to negative(-).
MIDDLE VALUE: The middle value i.e 2px gives shadow at lower part of text.To give shadow at top part of text change the sign to negative.
THIRD VALUE: The 3rd value gives an overall fading effect to to text acording to the colour we give in the last past i.e black.

<html>
<head>
<style>
.main{
margin-left:360px;

}
.inline,.inline1,.inline2{
color:#6666FF ;
margin-top:0px;
font-size:200px;
float:left;
font-family:impact;
-webkit-transform:rotate(1deg);
text-shadow:1px 2px 10px black;

}
.inline1{
-webkit-transform:rotate(40deg);
font-size:150px;
margin-top:30px;
color:white;
text-shadow:1px 1px 10px black;

}
.next{
font-size:50px;
margin-left:390px;
color:#A8A8A8 ;
font-family:sans-serif;

}
</style>

</head>

<body bgcolor="#F0F0F0">
<div class="main">
<div class="inline">W</div>
<div class="inline1">W</div>
<div class="inline2">W</div>
</div>
<span class="next">thewwwdesigners</span>
</body>
</html>