Testo ruotato di 90 gradi, allineato alla pagina in alto a destra con CSS

Question

So come ruotare il testo di 90 gradi usando i CSS, ma sto cercando di allineare il testo in alto a destra della pagina (o un elemento genitore) come il suo sé ruotato di 90 gradi. È possibile?

Esempio:

Answer 1

Nessuna delle precedenti soluzioni funziona per qualsiasi quantità di testo. Devi usare l'origine della trasformazione.

<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

La mia prima volta rispondere a qualcosa di molto nuovo per questo, ma qui è il codice:

<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

La soluzione è semplice, aggiungere la rotazione nel testo e posizione assoluta .

<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>