2010-05-01 15 views
8

Estoy usando la regla CSS3 "rotar" para rotar un div que contiene texto. Puede ver la página aquí: http://vitaminjdesign.com/v2/socialmedia.html. Estoy buscando compatibilidad con varios navegadores para rotar el div; sin embargo, esta regla CSS3 no funcionará en IE. ¿Hay una opción de jQuery u otra solución de JavaScript que produzca el mismo resultado, con compatibilidad entre navegadores?CSS3 rotate alternative?

Respuesta

11

Usando Sandpaper, puede utilizar esta regla CSS:

-sand-transform: rotate(90deg); 

y va a trabajar en todos los navegadores - incluso en el IE.

+0

esto se ve bien. Lo probaré y te llamaré – JCHASE11

+0

, como css3, la representación del texto no es uniforme. Esta es mi mejor opción, pero no es una GRAN opción. – JCHASE11

+0

no funciona tan bien ... – JCHASE11

1

Usaría Raphael y Cufon para este tipo de cosas, aunque tiene que enrollar su propio ajuste de palabras al rotar porque tendrá que usar print de Raphael en lugar de replace de Cufon. De esta forma, las fuentes son vectores y las rotaciones se manejan de una manera puramente geométrica.

Los problemas actuales con css-rotate van más allá de la compatibilidad entre navegadores, sin embargo, en los navegadores que sí lo admiten, los resultados a menudo se ven como basura. Su sitio en Firefox 3.6 parece una mezcolanza alias sobre líneas base irregulares. Sé que hiciste una pregunta específica, la cual hice lo mejor que pude para responder, pero mi consejo para ti es que te deshagas de los gastos generales de las bibliotecas js por lo que estás tratando de lograr aquí, y solo opto por una imagen de alta calidad. Ya ha invertido ancho de banda en la imagen de fondo "colgar etiquetas", por lo que el costo de agregar texto a esa imagen es mínimo, mientras que el costo de bibliotecas js completamente nuevas para manejar el problema de la rotación de texto correctamente será bastante alto. No es la solución más innovadora, te lo concederé ... pero ahí es donde estamos hoy.

+0

Estoy completamente de acuerdo ... pero para fines de SEO (de una empresa de diseño web) eso no es una opción. – JCHASE11

2

Si desea rotaciones CSS compatible con versiones antiguas de IE, hay una filter progid:DXImageTransform.Microsoft.Matrix para eso, sino que se puede aplicar sólo una vez y muchos cálculos están implicados cuando se calcula la matriz último out.