obracanie tylko tekstu (nie elementu div) w elemencie div

Question

Próbuję utworzyć stronę z wieloma elementami div, których pozycje i rozmiar są tworzone osobno. Następnie chcę wstawić tekst do tych elementów, więc używam JS, aby umieścić tekst w innerHTML. Czy istnieje sposób, że mogę obrócić tylko tekst o 90 stopni (a nie sam div, ponieważ nie chcę zmieniać pozycji i orientacji elementów div?

Próbowałem -webkit-transform: obróć (-90deg); -moz-transform: rotate (-90deg); w CSS, ale wszystkie one obracać same div, a nie tylko tekst

Każdy pomysł, jeśli jest to możliwe

Dzięki..!

Answer 1

Nie próbowałem tego, ale dlaczego nie uwzględnić dodatkowego <div> między twoim aktualnym <div> a twoim tekstem, z przezroczystym tłem? Następnie można obrócić ten <div>.

Answer 2

Spójrz na ten link: http://snook.ca/archives/html_and_css/css-text-rotation Wydaje się, trzeba zrobić Hax dla różnych przeglądarek ... Może CSS3 ma lepsze rozwiązanie.

Answer 3

ponieważ transformacja obraca całą sekcję div, możesz ustawić wysokość i szerokość elementu div zawierającego tekst, a następnie przekształcić go.

Answer 4

Zawiń tekst w przęśle i ustaw go w wierszu inline. Zwróć uwagę, że element nadrzędny div nie obraca się razem z tekstem.

<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