rotar - texto en diagonal css

Cómo rotar texto en css

Question

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

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?

Answer 1

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

Se agregó un ejemplo:

El html:

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

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.

Answer 2

Puedes usar así ...

<div id="rot">hello</div>

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

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

Answer 3

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 <div> 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 compilaciones de desarrollo si quieres la nueva funcionalidad.

¡Espero que esto ayude!