Cómo rotar texto en css

¿Cómo giro texto en css para obtener la siguiente salida …

enter image description here Hola,

Editar:

Gracias por una sugerencia rápida. He agregado mi código de muestra en jsfidle:

http://jsfiddle.net/koolkabin/yawYM/

El problema al que me enfrento es que cuando rotamos el texto, rompe la alineación y las posiciones … ¿qué es lo que está causando eso y cómo puedo gestionarlo?

Necesita rotate propiedad de transformación CSS3; consulte aquí para qué navegadores lo admiten y el prefijo que necesita usar.

Un ejemplo para navegadores webkit es -webkit-transform: rotate(-90deg);

Editar: La pregunta se modificó sustancialmente, así que agregué una demostración que funciona en Chrome / Safari (ya que solo -webkit- reglas prefijadas de -webkit- CSS). El problema que tienes es que no quieres rotar el título div , sino simplemente el texto dentro de él. Si elimina su rotación, los

s están en la posición correcta y todo lo que necesita hacer es ajustar el texto en un elemento y girarlo en su lugar.

Ya existe un widget más personalizable como parte de la interfaz de usuario de jQuery. Consulte la página de demostración de acordeón . Estoy seguro de que con algo de inteligencia de CSS deberías poder hacer que el acordeón sea vertical y también rotar el texto del título 🙂

Editar 2: anticipé el problema del centro de texto y ya actualicé mi demostración . Sin embargo, existe una restricción de altura / ancho, por lo que el texto más largo aún podría romper el diseño.

Editar 3: Parece que la versión horizontal formaba parte del plan original, pero no veo ninguna forma de configurarlo en la página de demostración. Estaba equivocado … ¡el nuevo acordeón es parte de la próxima jQuery UI 1.9! Así que podrías probar las comstackciones de desarrollo si quieres la nueva funcionalidad.

¡Espero que esto ayude!

¿Supongo que esto es lo que estás buscando?

Se agregó un ejemplo:

El html:

 
31 July 2009

El css:

 .year { display:block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support } 

Todos los ejemplos son del sitio mencionado.

Puedes usar así …

 
hello
#rot { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width:100px; }

Echa un vistazo a este violín: http://jsfiddle.net/anish/MAN4g/

En su caso, es mejor utilizar la opción de rotación desde la propiedad de transformación como se mencionó anteriormente. También hay propiedad de writing-mode y funciona como rotar (90deg) por lo que en su caso, debe girarse después de que se aplica. Incluso no es la solución correcta en este caso, pero debe tener en cuenta esta propiedad.

Ejemplo:

 writing-mode:vertical-rl; 

Más sobre la transformación: https://kolosek.com/css-transform/

Más sobre el modo de escritura: https://css-tricks.com/almanac/properties/w/writing-mode/