...

View Full Version : How to rotate text?



MrTIMarshall
08-06-2012, 02:16 AM
Hello,

I have managed to rotate my text nicely if it's by 90 degrees but not 270 degrees.

Rotate by 90 Degrees:


p {
color:#333;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}



Rotate by 270 Degrees:


p {
color:#333;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


Does anyone have any idea why it's not working please?

Best Regards,
Tim

AndrewGSW
08-06-2012, 02:39 AM
In which browsers does it work/not work?

I understand for IE that you need to set it to "Standard IE9" browser mode, but that it is also a bit buggy.

MrTIMarshall
08-06-2012, 02:52 AM
In which browsers does it work/not work?

I understand for IE that you need to set it to "Standard IE9" browser mode, but that it is also a bit buggy.

I'm using Chrome.

I've just uploaded an example here (http://tornhq.com/SOCIAL_SLIDE-TEST.html#)

Let me know if you want to see the style 1 I added as that one works but it's the wrong rotation.

Best Regards,
Tim

Major Payne
08-06-2012, 07:17 PM
CSS: Rotate Text / Image Elements by 90, 180 or 270 Degrees (http://www.kavoir.com/2009/08/css-rotate-text-image-elements-by-90-180-or-270-degrees.html)

Text rotation for all (http://ajaxian.com/archives/text-rotation-for-all)
CSS3: Rotating Text (http://michael.theirwinfamily.net/articles/csshtml/css3-rotating-text)
Rotate text in all browsers (https://snipt.net/tbeseda/rotate-text-in-all-browsers/)

270 degrees should be like -90 degrees



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum