Click here to Skip to main content
Click here to Skip to main content
Search within:




 
Comments & Discussions (30)

Making Text Upside down using CSS

By , 25 Nov 2011
 

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 India
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.,
Follow on   Twitter   Google+

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First Prev Next
GeneralMy vote of 3 PinmemberGirish Balanagu17-Feb-13 19:20 
GeneralRe: My vote of 3 Pinmvpthatraja18-Feb-13 10:15 
GeneralRe: Cheers. :) PinmemberRaisKazi21-Dec-11 0:41 
GeneralRe: Yes Unicode char broken in this site... PinmemberShilpi Boosar13-Mar-11 20:45 
GeneralRe: But it looks like broken(I mean that site convert things som... Pinmvpthatraja10-Mar-11 7:35 
GeneralRe: ?d??uo? buiz??? (: ??i ?ob PinmemberShilpi Boosar10-Mar-11 7:26 
GeneralReason for my vote of 5 Nice one. Especially I liked you cov... PinmemberRaisKazi20-Dec-11 19:45 
GeneralRe: But got excess points because you are a silver author now :) Pinmvpthatraja20-Dec-11 20:06 
But got excess points because you are a silver author now Smile | :)
Sign In·View Thread·Permalink
GeneralNice one! I too tried with CSS3 and Canvas. http://my.opera.... Pinmemberraju dasa2-Dec-11 8:08 
GeneralReason for my vote of 5 very nice and concise. Thanks for sh... PinmemberBrianBissell1-Dec-11 5:14 
GeneralReason for my vote of 5 Good one. PinmemberRaisKazi29-Nov-11 1:15 
GeneralReason for my vote of 5 Fantastic! I can see some good nefar... PinsubeditorWalt Fair, Jr.26-Sep-11 13:25 
GeneralReason for my vote of 5 Very Nice...! PinmemberRaajTalluri15-Mar-11 21:51 
GeneralReason for my vote of 5 very good! PinmemberGreenRecover14-Mar-11 23:26 
GeneralReason for my vote of 5 Its really nice. I create the html p... PinmemberShilpi Boosar10-Mar-11 0:59 
GeneralRe: Actually In web you can find some sites for this kind of dif... Pinmvpthatraja10-Mar-11 3:34 
GeneralReason for my vote of 5 Nice one! PinmvpManfred R. Bihy9-Mar-11 12:11 
GeneralGreat to see I am the inspiration for it, 5. PinmemberPompeyBoy38-Mar-11 22:05 
GeneralReason for my vote of 5 5. Glad to see I am the inspiration ... PinmemberPompeyBoy38-Mar-11 22:04 
GeneralRe: /*Glad to see I am the inspiration for it. Does that mean I ... Pinmvpthatraja10-Mar-11 3:32 
GeneralReason for my vote of 5 nice one, but I have an alternate to... PinmvpPrerak Patel8-Mar-11 16:25 
General????b si ???? PinmvpPrerak Patel8-Mar-11 16:23 
GeneralReason for my vote of 5 Nice one man. But IE9 should it cra... PinmemberVenkatesh Mookkan8-Mar-11 15:55 
GeneralRe: But I didn't check in IE9 but tested in IE 7 &amp; 8. Welcom... Pinmvpthatraja10-Mar-11 3:30 
GeneralReason for my vote of 5 This is Uber! 5* PinmemberDrABELL8-Mar-11 15:16 
GeneralReason for my vote of 5 Cool PinmemberJohnny J.8-Mar-11 9:46 
GeneralReason for my vote of 5 Good to see my name in that way (i t... PinmemberE$w@r8-Mar-11 7:28 
Generalʇɐǝɹb sı ʇɐɥʇ PinmemberPrerak Patel8-Mar-11 16:24 
GeneralRe: ʇɐǝɹb sı ʇɐɥʇ Pinmvpthatraja10-Mar-11 6:02 
GeneralRe: ʇɐǝɹb sı ʇɐɥʇ PinmemberReelix14-Mar-11 21:39 
Last Visit: 31-Dec-99 18:00     Last Update: 19-Jun-13 21:14Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
About Article
Making Text Upside down using CSS
Type Tip/Trick
Licence CPOL
First Posted 8 Mar 2011
Views 32,289
Bookmarked 19 times
Tools
Test HTML compatibility
Related Videos
Upside down text in MS Excel
Ten CSS tricks you may not know
Custom ASP.NET Editable DropDownList
Package that speeds up loading of JavaScript, CSS and image files
Customize Validation Summary
Ten ways to speed up the download time of your web pages
Internet Explorer & CSS issues
Vertical Stretch 100% in HTML5/CSS3
Multi-Select TreeView Control in C#
Browser and Feature Detection: Make your Website look Great Everywhere
New CSS commands for Internet Explorer 7
Speed Up Your Website - By Example
Getting SASSy with CSS
ensure - Ensure JavaScripts/HTML/CSS are loaded on-demand when needed
Making the entire menu td clickable
OneImage
Relative Path Solution for Master Pages
Simple CSS Parser
Article Four: Building a UI Platform in C# - Painting Text to the Pixel
CSS Variables
Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130619.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid