girando solo el texto (no el div) en un elemento div

Question

Estoy intentando crear una página web con muchos elementos div cuyas posiciones y tamaño se crean por separado. Luego, quiero insertar texto en esos elementos, así que uso JS para poner el texto en el innerHTML. ¿Hay alguna manera aquí que puedo rotar solo el texto en 90 grados (y no en el div mismo ya que no quiero cambiar la posición y orientación de los elementos div?

Intenté -webkit-transform: rotate (-90deg); -moz-transform: rotate (-90deg); en CSS, pero todos ellos giran los divs en sí y no sólo el texto

Cualquier idea si esto es posible

Gracias..!

Answer 1

No he intentado esto, pero ¿por qué no incluir un extra <div> entre su actual <div> y su texto, con un fondo transparente? A continuación, puede rotar ese <div>.

Answer 2

Tome un vistazo a este enlace: http://snook.ca/archives/html_and_css/css-text-rotation Parece que tiene que hacer Hax para diferentes navegadores ... Tal vez CSS3 tiene una mejor solución.

Answer 3

Dado que la transformación gira toda la sección div, puede establecer el alto y el ancho del div que contiene el texto y luego transformarlo.

Answer 4

Envuelva el texto en un lapso y configúrelo en bloque en línea. Observe cómo el div principal no gira junto con el texto.

<div class="roundedOne"> 
    <span class="rotate">TEXT</span> 
</div> 

.rotate { 
    display: inline-block; 
    transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
} 

.roundedOne { 
    background: red; 
} 

CODEPEN

http://codepen.io/alexincarnati/pen/JEOKzw