вращение только текста (не div) в элементе div

Question

Я пытаюсь создать веб-страницу с большим количеством элементов div, позиции и размер которых создаются отдельно.Далее я хочу вставить текст в эти элементы, поэтому я использую JS, чтобы поместить текст в innerHTML.Есть ли здесь способ, которым я могу повернуть только текст на 90 градусов (а не сам div, поскольку я не хочу изменять положение и ориентацию элементов div?

Я пробовал -webkit-transform:rotate (-90deg); -moz-transform: rotate (-90deg); в CSS, но все они вращают сами div, а не только текст.

Любая идея, если это возможно.

Спасибо!

Answer 1

Оберните текст в промежуток и установите для него встроенный блок. Обратите внимание, что родительский div не вращается вместе с текстом.

<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

Answer 2

Я не пробовал это, но почему бы не включить дополнительные <div> между вашим текущим <div> и вашим текстом с прозрачным фоном? Затем вы можете повернуть это <div>.

Answer 3

, так как преобразование вращает весь раздел div, вы можете установить высоту и ширину div, содержащего текст, а затем преобразовать его.