Rotate text with CSS/Javascript/Jquery

Question

I have tried this to rotate text to 270 Degree

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Working Perfectly in Firefox, Google Chrome, Safari working with some spacing issue in IE 8,7,6

but its really Sucks in OPERA Any Idea???

Fabien Ménager · Accepted Answer · 2011-02-04 07:14:10Z

2

Did you try this ?

-o-transform: rotate(270deg);

answered Feb 4, 2011 at 7:14

Fabien Ménager

140k3 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SpliFF · Accepted Answer · 2011-02-04 07:15:02Z

1

It works for me. Using Opera 11 on Linux

Sample: http://www.inwardpath.com.au

/* This wrapper is required to rotate the text around the left edge */
#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;

}

answered Feb 4, 2011 at 7:15

SpliFF

39.1k16 gold badges95 silver badges122 bronze badges

2 Comments

Sujith Kumar KS Over a year ago

thank you Its working :) added the filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Working in IE6 also

SpliFF Over a year ago

I found that ms-writing-mode produced a 'cleaner' font outline than the rotation filter. I was under the impression it was supported in IE6 but I never cared to test it (IE6 must die!)

JK. · Accepted Answer · 2011-02-04 07:07:24Z

0

Your code example is for rotating 90 degrees. To rotate 270 try this

-webkit-transform: rotate(-270deg); 
-moz-transform: rotate(-270deg);

answered Feb 4, 2011 at 7:07

JK.

21.6k35 gold badges139 silver badges222 bronze badges

2 Comments

Justin Over a year ago

I think you will find that 360 - 90 = 270

JK. Over a year ago

@Kragen Hah lol you are right, I read it too quickly and missed the "-" minus sign

Jo Albright · Accepted Answer · 2011-02-04 07:08:37Z

0

I like using this - http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

answered Feb 4, 2011 at 7:08

Jo Albright

5701 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Rotate text with CSS/Javascript/Jquery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related