Tekst obrócony o 90 stopni, wyrównany do strony w prawym górnym rogu z CSS

Question

W jaki sposób obrócić tekst o 90 stopni za pomocą CSS, ale próbuję wyrównać tekst do prawego górnego rogu strony (lub elementu nadrzędnego) jako własny obrót o 90 stopni. czy to możliwe?

Przykład:

Answer 1

Żadne z wcześniejszych rozwiązań nie działa dla żadnej ilości tekstu. Musisz użyć transformacji pochodzenia.

<div class="container"> 
<span class="rotate">Hello THERE!</span> 
</div> 

.rotate { 

    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: left top; 
    -moz-transform: rotate(90deg); 
    -moz-transform-origin: left top; 
    -ms-transform: rotate(90deg); 
    -ms-transform-origin: left top; 
    -o-transform: rotate(90deg); 
    -o-transform-origin: left top; 
    transform: rotate(90deg); 
    transform-origin: left top; 

    position: absolute; 
    top: 0; 
    left: 100%; 
    white-space: nowrap;  
    font-size: 48px; 
} 

Answer 2

Mój pierwszy raz odpowiadając coś bardzo nowego do tego, ale tutaj jest kod:

<div id="block"> 
<p id="rotate">Hello!!!</p> 
</div> 

<style> 
#block{ 
    width:500px; 
    height:500px; 
    display:block; 
    margin:auto; 
    border: 1px solid #000; 
    position:absolute; 
    } 

#rotate { 
    position:relative;/* place the text relateve to whatever tag is devined as absolute */ 
    left:130px;/* change these dimensions - can use left or right */ 
    top:20px;/* change these dimensions can use top or bottom*/ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 

} 
</style> 

Answer 3

Rozwiązanie jest proste, należy dodać obrót tekstu i pozycji absolutnej .

<style> 
#block{ 
    width:500px; 
    height:500px; 
    display:block; 
    margin:auto; 
    border: 1px solid #000; 
    position:relative; 
    } 

#text { 
    padding:0; 
    margin:0; 
    position:absolute; 
    right:0; 
    font-size:30px; 
    top:40px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
} 
</style> 
<div id="container"> 
<p id="text">Hello!!!</p> 
</div>