Döndür ve çevir

Bir metin satırını döndürmede ve konumlandırmada bazı sorunlar yaşıyorum. Şimdi sadece işe yarayan konum. Döndürme de çalışır, ancak yalnızca konumlandırmayı devre dışı bırakırsam.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

Html sadece düz metindir.

Bunun nedeni, dönüştürme özelliğini iki kez kullanmanızdır. Basamaklı CSS kuralları nedeniyle, aynı özgülüğe sahiplerse son bildirim kazanır. Her iki dönüşüm bildirimi de aynı kural kümesinde olduğundan, durum budur.

Yaptığı şey şudur:

1. metni 90 derece döndürün. Tamam.
2. % 50'yi% 50'ye çevirin. Tamam, bu birinci adımla aynı özelliktir, bu nedenle bu adımı uygulayın ve 1. adımı göz ardı edin.

Bkz http://jsfiddle.net/Lx76Y/ ve ilk beyanı üzerine yazılır görmek için ayıklayıcısında açmak

Çeviri, döndürmenin üzerine yazdığı için, bunları aynı bildirimde birleştirmeniz gerekir: http://jsfiddle.net/Lx76Y/1/

Bunu yapmak için boşlukla ayrılmış bir dönüşüm listesi kullanırsınız:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Bir zincirde belirtildiklerini unutmayın, bu nedenle önce çeviri uygulanır, ardından döndürme yapılır.

Yorum yapamam, bu yüzden işte burada. @David Storey cevabı hakkında.

CSS3 zincirlerinde "yürütme sırası" konusunda dikkatli olun! Sıra, soldan sağa değil, sağdan sola doğrudur.

transformation: translate(0,10%) rotate(25deg);

İşlem rotateönce yapılır, ardından translate.

Bkz: CSS3 dönüşüm sırası önemlidir: önce en sağdaki işlem

Buna gerek yok, çünkü css 'write-mode' 'dikey-lr' veya 'vertical-rl' değerleri ile istediğiniz gibi kullanabilirsiniz.

.item {
  writing-mode: vertical-rl;
}

Kaçırılabilecek bir şey var: zincirleme projemde, boşlukla ayrılmış bir listenin sonunda boşlukla ayrılmış noktalı virgül gerektirdiği ortaya çıktı.

Başka bir deyişle, bu işe yaramaz:

transform: translate(50%, 50%) rotate(90deg);

ama bu:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"