Making Text Upside down using CSS

thatraja

4.95/5 (28 votes)

25 Nov 2011CPOL

131.5K

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

XML

<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)