Upside Down Text with CSS3

When it comes to rotating, tilting or scaling text, you would normally rely on JavaScript or images laid on top of each other, to give that effect. However with the CSS3 transformation functions, you can do all of this without any JavaScript code. Although you can use CSS relative/absolute positioning and achieve some of these effects, CSS3 transforms gives you flexibility and more control. For example if you were to move an element using relative position, you had to do it against the current element or one of its parent. However with CSS3 transforms, you can position it relative to its current position.

Note: CSS3 transforms is supported in IE9 and above, Firefox 3.5 and above, Opera 10.5, Chrome 1 and above (WebKit 3.2+). W3C accepted the 2D Transformation module (adapted from SVG) proposed by the WebKit team a couple of years ago. Using this module , elements could be rotated, skewed, resized etc.

In this post, we will see a simple example of using CSS3 rotate transform to turn text upside down. We will be using the rotate() function which is the simplest of all CSS3 transform function and does what it names suggests – it rotates the element around a point.

Here’s some CSS code:

<title>Turn Text Upside Down - DevCurry.com</title>
<style type="text/css">
#divOne 
{
  -moz-transform:rotate(-180deg); /* Firefox */
  -webkit-transform:rotate(-180deg); /* Webkit */        
  -ms-transform:rotate(-180deg); /* IE */
  -o-transform:rotate(-180deg); /* Opera */
  transform:rotate(-180deg); /* future */
  position:absolute;
}    
</style>

As you can see, all the major browsers have implemented the rotate property. Each has its proprietary prefix. As you can observe, we have used negative value here and that’s what rotates the text upside down. So –30 degrees is equivalent to 330 degrees and so on.

The text we are rotating here is 'DevCurry.com' kept in a div called 'divOne'.

OUTPUT
CSS3 Rotate Upside down
Note: You can use the“text-gravity: inverse" style too, but that uses the UTF-8 character generator to turn text upside down.




About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Anonymous said...

-180 degrees is the same as 180 degrees. You should be able to use either. (Tested with Firefox.)

psayre23 said...

For old IE:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);