CSS3’s Tilted Text Effect

Here’s a cool text effect that can be achieved easily using CSS3: tilted text. To create this effect, you’ll need to create to divs — one for the text that is to be tilted to the left, and another for the text that is to be tilted to the right. Your HTML should look something like this:

<div id="container">
<div id="tilted-left">TILTED</div>
<div id="tilted-right">TEXT</div>
</div>

To style this properly, you’ll have to use the transform property with rotate values (which you can customize depending on just how titled you want your text to be). You can also use the text-shadow property to give the text a slight 3D effect. Here’s what your CSS needs to look like:

#tilted-left {
 font-size: 100px;
 color: #fff;
 text-shadow:#fff 1px 1px 0,
 #f1f1f1 2px 2px 0,
 #f2f2f2 3px 3px 0,
 #f3f3f3 4px 4px 0,
 #f4f4f4 5px 5px 0,
 #f5f5f5 6px 6px 0;
 transform: rotate(-4deg) rotateX(10deg) skewX(2deg);
 float: left;
}
 
#tilted-right {
 font-size: 100px;
 color: #fff;
 text-shadow:#fff 1px 1px 0,
 #f1f1f1 2px 2px 0,
 #f2f2f2 3px 3px 0,
 #f3f3f3 4px 4px 0,
 #f4f4f4 5px 5px 0,
 #f5f5f5 6px 6px 0;
 transform: rotate(4deg) rotateX(-10deg) skewX(-2deg);
 float: right;
}

Play around with the text-shadows, colors, and degrees of rotations to customize this tilted text to your own liking.