Making Text Upside down using CSS

Description

After seeing this message by PompeyBoy3, I wanted the same in CSS, so I have tried & am now posting here.

Code

<html>
<head>
<title>Text Up side down</title>
<style type="text/css">
.txtUpsideDown 
{
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  /* IE6,IE7 */
	ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
	-moz-transform: rotate(-180deg);  /* FF3.5+ */
	-o-transform: rotate(-180deg);  /* Opera 10.5 */
	-webkit-transform: rotate(-180deg);  /* Safari 3.1+, Chrome */
	position: absolute; 
}
</style>
</head>
<body>
<div class="txtUpsideDown">Test message</div>
</body>
</html>

Browser Compatibility

I have tested this script in the following Web browsers:

Internet Explorer
Mozilla Firefox
Google Chrome
Safari
Opera

Reference

http://css3please.com/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

thatraja

Web Developer

India

Member

Follow on Twitter
Google+

Google

Programmer | CodeProject MVP, Mentor | Author | Geek | Blogger | Bachelor | Dude

About him & his blog? check out here.

In Codeproject, he posted a blogpost & more than couple of Tip/Tricks, hope he'll write more soon. And he got a place in CCC table.

In programming, he wants to go with new things like HTML5, CSS3, WP7, Silverlight, WPF, WCF, etc.,

His hobbies are watching movies, Codeproject, being alone, etc.,

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment