90 derece döndürülmüş metin, CSS

ile sayfanın sağ üst kısmına doğru sağa kaydırın CSS kullanarak metni 90 derece döndürmeyi biliyorum, ancak metni sayfanın sağ üst köşesine (veya ana öğeye) hizalamaya çalışıyorum 90 derece döndürülmüş kendini. Mümkün mü?90 derece döndürülmüş metin, CSS

Örnek:

enter image description here

kaynak

2013-08-22 Dan

Şu anda sahip olduğunuz kodu gösterebilir misiniz? Hizalamayı doğru kullanmayı denediniz mi? – Siva

Önceki çözümlerden hiçbiri herhangi bir metin için işe yaramıyor. Dönüşüm kaynağını kullanmanız gerekiyor.

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

kaynak

2013-08-23 00:11:52 meub

Tam olarak aynı cevabı göndermek üzereydi, çok hızlı bayım –

Bu, gitmek için doğru yol. Herhangi bir şüpheniz varsa, bunu bir demoya atın ve metnin yazı tipi boyutu yukarı ve aşağı çarparak oynayın ... ardından diğer cevaplarla deneyin. Bu çok daha esnek ve sürdürülebilir. – Will

Harika, dönüşüm kökenleri ile uğraşmaktaydı, ancak çivi çakamıyordu. Teşekkürler! – Dan

Benim ilk zaman kodunu burada çok bu yeni ama bir şey olduğunu yanıtlayan:

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

kaynak

2013-08-23 00:04:17

çözüm basit, metin ve mutlak pozisyonda dönüşünü eklemek .

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

kaynak

2013-08-23 00:09:23

90 derece döndürülmüş metin, CSS

cevap

İlgili konular