90 độ văn bản được xoay, tuôn ra từ trên cùng bên phải với CSS

Question

Tôi biết cách xoay văn bản 90 độ bằng CSS, nhưng tôi đang cố căn chỉnh văn bản ở trên cùng bên phải của trang (hoặc phần tử gốc) như tự xoay 90 độ của nó. Điều này có thể không?

Ví dụ:

Answer 1

Không có giải pháp nào trước đây phù hợp với bất kỳ lượng văn bản nào. Bạn cần phải sử dụng nguồn gốc biến đổi.

<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

thời gian đầu tiên của tôi trả lời cái gì đó rất mới này, nhưng đây là đoạn code:

<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

Giải pháp là đơn giản, thêm vòng quay trong văn bản và vị trí tuyệt đối .

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