jquery texto rotación

Question

Tengo un texto simple dentro de un div, algo como el siguiente;

<div id="banner"> 
    <div>This is an example text</div> 
</div> 

Quiero que el texto dentro del div se gire 20-30 grados. Ya encontré el tema this en stackoverflow y me da el resultado deseado en Firefox y Chrome, pero no en IE7, IE8 e IE9. También probé jquery rotate, pero cuando uso esto parece que el plugin está haciendo algo con el div mismo, haciéndolo desaparecer, en lugar de girar el texto dentro del div. ¿Es esto posible con javscript y/o css?

NOTA: Cufon también se está utilizando.

actualización después de recibir respuesta Codlers:

Este es el css corriente aplicada después de la respuesta de Codler. Funciona en FF y 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;*/ 

ACTUALIZACIÓN 2: IE7 e IE8 están girando el texto ahora, pero en IE9 me estoy haciendo un gran cuadrado negro detrás de mi texto girado. ¿Qué puede estar causando esto? CSS es ahora como abajo;

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

La pieza de código de trabajo final. Los créditos para este son para Jeff y Codler.

HTML:

<div id="banner"> 
    <div>This is an example text</div> 
</div> 

CSS por defecto:

#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 para IE 7 & 8 - Cargado condicionalmente:

#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; 
} 

Answer 1

En los navegadores compatibles con los estándares, se puede utilizar la propiedad CSS3 transform, aunque es probable que sea una buena idea usar prefijos de proveedores, por ejemplo .:

-o-transform: rotate(5deg); 
-khtml-transform: rotate(5deg); 
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg); 

En Internet Explorer 6 y 7, las cosas se complican. Puede usar la propiedad filter de IE para hacer la rotación.

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

rotarán el elemento 90 grados. También puede girar 180 o 270 grados usando rotation=2 o rotation=3

¿Desea rotar algo en IE en un ángulo diferente? ¿Estás listo para el dolor de cabeza?

Puede usar la propiedad de IE filter nuevo y especificar las coordenadas de la matriz, y conseguir algo realmente feo como esto:

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

hay instrucciones sobre cómo utilizar la matriz de coordenadas en this page, pero, francamente, ninguno de ellos hacen cualquier sentido. Una mejor solución es usar este útil Matrix calculator que generará el CSS que necesita cuando se especifica el ángulo en grados.

Se puede extraer de la CSS en my site para ver un ejemplo, pero no ha comprobado que el uso de IE desde hace tiempo, por lo que no se puede hacer ninguna promesa ...

Answer 2

Es posible girar con CSS3

transform: rotate(20deg); 

Recuerde que algunos buscadores requieren el prefijo del proveedor.

.box_rotate { 
    -moz-transform: rotate(20deg); /* FF3.5+ 
     -o-transform: rotate(20deg); /* Opera 10.5 
    -webkit-transform: rotate(20deg); /* Saf3.1+, Chrome 
     -ms-transform: rotate(20deg); /* IE9 
      transform: rotate(20deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
        M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand'); 
       zoom: 1; 
} 

Fuente http://css3please.com/

Answer 3

No es realmente posible en el IE. En el mejor de los casos, IE solo puede rotar en múltiplos de 90 grados, e incluso eso es un dolor (IIRC). Sin embargo, this answer reclama lo contrario. Para los navegadores modernos, utilice transform, -webkit-transform y -moz-transform, como ya se sugirió.

Es posible que pueda pavonearlo utilizando VML (Vector Markup Language) en IE. Creo que puede hacer rotaciones arbitrarias.

Answer 4

Utilice esta herramienta para generar CSS que trabajará navegadores:

http://www.useragentman.com/IETransformsTranslator/index.html

Se hace reallywork.

Answer 5

Parece que el recuadro negro en el fondo en IE9 ocurre cuando esos desagradables filtros propietarios también están en el selector donde está haciendo las transformaciones css.