Rotar texto con CSS e IE

Question

Necesito rotar texto con CSS. Tengo las siguientes reglas de estilo, pero no parecen funcionar en Internet Explorer.

.footer #descr span { 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari y Chrome */ 
    transform: rotate(-20deg); /* Safari y Chrome */ 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

¿Cómo puedo rotar texto en IE con CSS?

Answer 1

Las versiones anteriores de IE (8 y abajo) no son compatibles con CSS3

Answer 2

IE no soporta algunas características de la solución CSS3.The: dejar que se degradan con gracia en el IE y dejar que las personas con un navegador moderno se encuentra sitios web modernos .

Answer 3

Para conseguir este trabajo en el IE < 9 que tendría que utilizar papel CSS arena, que es un polyfill para las transformaciones CSS: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 4

A continuación IE9, Internet Explorer tiene efectivamente cero soporte incorporado para CSS3 o cualquier otro estándar tecnologías web como SVG que le permiten rotar el texto de la plataforma cruzada como lo desee. Microsoft ha incluido dos formas de elementos giratorios (por ejemplo, texto) desde IE6, sin embargo, el método más sencillo sólo funciona en incrementos de 90 grados, así:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */ 

Si realmente necesita para lograr que los 340/-20 grados Incluido en su ejemplo, entonces tendrá que intentar algo más difícil, documentado aquí: MSDN Matrix Filter. Dado lo innecesariamente complejo que parece, una búsqueda rápida en Google reveló una buena calculadora que generará una regla CSS -ms-filter para usted: Matrix Calculator.

Tenga en cuenta que estas dos características están en desuso en IE9, que creo que admite -ms-transform en su lugar. Dependiendo de si Microsoft define obsoleta como eliminada o desaconsejada, es posible que desee verificar que IE9 no esté rotando su texto dos veces.

.footer #descr span { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */ 
    -ms-transform: rotate(-20deg); /* IE9+ */ 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari & Chrome */ 
    transform: rotate(-20deg); 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

para ser perfectamente honesto sin embargo, si tiene la intención de hacer uso de HTML5 y/o CSS 3 a continuación, estoy de acuerdo con la respuesta de Duopixel que la inclusión de una biblioteca CSS 3 a través de JavaScript sería sensato. Dado que los usuarios de Windows XP no pueden actualizar IE8 pasado, es una buena idea que cualquier sitio comercial lo admita.

Answer 5

El único que funcionó para mi situación era utilizar CSS Papel de lija - una vez que tuve que integrada, probé el siguiente código CSS ...

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
} 

y listo! IE rotó el texto verticalmente, leyendo de abajo arriba. Sin embargo, en todos los demás navegadores, esta orientación se considera 270 grados.

ahora tenía otros navegadores que giran el texto en un ángulo diferente a IE, como si el sistema de coordenadas de IE es el regreso a la parte delantera (no me sorprendería ...)

pensé' Pruebe un comentario condicional para servir la regla -sand-transform solo a los navegadores IE. Por alguna razón, IE ignoró esto y entonces la rotación ni siquiera se aplicó (¿IE10 ignora los comentarios condicionales?)

Así que ahora tuve el problema de hacer que todos los navegadores lo hicieran igual. Reorganizando el orden de las reglas y estableciendo 180 grados para IE y 270 grados para los demás, finalmente tuve una regla CSS que trabajó para rotar el texto verticalmente, leyendo de abajo arriba, en Firefox, Chrome, Safari e IE.

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
    -webkit-transform: rotate(270deg) !important; 
    -moz-transform: rotate(270deg) !important; 
    -o-transform: rotate(270deg) !important; 

    font-size: 14px; 
    text-transform: capitalize; 
    display: block; 
    white-space: nowrap; 
    height: 330px; 
    text-align: left; 
    color: #FFF; 
    line-height: 40px; 
    margin-top: 0px; 
} 

¡Hurra! Espero que esto sea de ayuda para alguien, perdí más de 2 horas tratando de resolverlo. : P

Actualización: Solo quería hacer una corrección: 270 grados es 270 grados en todos los navegadores. Descubrí que tenía otra regla con una rotación de 90 grados, que se agregaba a una segunda regla de 180 grados, para dar un total de 270. Por lo tanto, era interesante observar que el valor de rotación es relativo (¿adicional?) En lugar de absoluto.

Answer 6

Esto funciona para IE:

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