Question

195

jquery text rotation

rated 0 times [ 197] [ 2] / answers: 1 / hits: 32029 / 13 Years ago, tue, may 31, 2011, 12:00:00

I've got a simple text inside a div, something like the following;

<div id=banner>

    <div>This is an example text</div>

</div>

I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?

NOTE: Cufon is also being used.

Update after Codlers answer:

This is the current applied css after the answer of Codler. Works in FF and Chrome.

-ms-transform: rotate(-20deg);

-moz-transform: rotate(-20deg);

/*-moz-rotation-point: 0 0;*/

-webkit-transform: rotate(-20deg);

/*-webkit-rotation-point: 0 0;*/

-o-transform: rotate(-20deg);

/*-ms-writing-mode: tb-lr;

* html writing-mode: tb-lr;*/

UPDATE 2:
IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;

-moz-transform: rotate(-20deg);

-o-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

-ms-transform: rotate(-20deg);  

transform: rotate(-20deg);

background-color:transparent;



/*-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/

/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');

zoom: 1;

z-index:1;



position:absolute;



padding     : 45px 10px 15px 10px;

The Final working piece of code. Credits for this go toe Jeff and Codler.

HTML:

<div id=banner>

    <div>This is an example text</div>

</div>

Default CSS:

#banner > div

{       

    -moz-transform: rotate(-20deg);                 /*FF*/

    -o-transform: rotate(-20deg);                   /*Opera*/

    -webkit-transform: rotate(-20deg);              /*Safari, Chrome*/

    -ms-transform: rotate(-20deg) !important;       /*IE9*/

        transform: rotate(-20deg);                      /*CSS3 default*/

    background-color:transparent;



    zoom: 1;

    z-index:1; /*NEEDED FOR IE8*/



    width: 191px;



    position:absolute;



    padding     : 45px 10px 15px 10px;

}

CSS FOR IE 7 & 8 - Loaded conditionally:

#banner

{

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;

    padding-top:0px;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocioblancac

Add To Favorites

Follow

Total Points: 699

Total Questions: 96

Total Answers: 108

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

rocioblancac questions

1 Angular: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Mon, Dec 13, 21, 00:00, 2 Years ago

1 Bootstrap multiple file selection - show only first file

Sun, Jul 26, 20, 00:00, 4 Years ago

1 React JS How to disable zoom

Wed, Jul 22, 20, 00:00, 4 Years ago

1 React Native https axios resquest gets Network Error on Android but not iOS

Thu, Jan 16, 20, 00:00, 4 Years ago

1 Color Input in React: The format is #rrggbb where rr, gg, bb are two-digit hexadecimal numbers

Mon, Jan 6, 20, 00:00, 4 Years ago

View All

answered 13 Years ago bretd · Accepted Answer

In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:

-o-transform: rotate(5deg);

-khtml-transform: rotate(5deg);

-webkit-transform: rotate(5deg); 

-moz-transform: rotate(5deg);

In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3

Do you want to rotate something in IE to a different angle? Are you ready for the headache?

You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');

There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.

You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...