rotating only the text (not the div) in a div element

Question

I am trying to create a webpage with a lot of div elements whose positions and size are created separately. Next, I want to insert text into those elements so I use JS to put the text in the innerHTML. Is there a way here that I can rotate just the text by 90degrees (and not the div itself since I don't want to change the position and orientation of the div elements?

I tried -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); in CSS but they all rotate the divs themselves and not just the text.

Any idea if this is possible.

Thanks!

Answer 1

I have not tried this, but why not include an extra <div> between your current <div> and your text, with a transparent background? You can then rotate that <div>.

Answer 2

Wrap the text in a span and set it to inline-block. Notice how the parent div doesn't not rotate together with the text.

<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