Putar dan terjemahkan

89

Saya mengalami masalah saat memutar dan memposisikan baris teks. Sekarang hanya posisi yang berhasil. Rotasi juga berfungsi, tetapi hanya jika saya menonaktifkan pemosisian.

CSS:

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

Html hanyalah teks biasa.

css webkit transform css-transforms Sera
sumber

Jawaban:

160

Alasannya adalah karena Anda menggunakan properti transform dua kali. Karena aturan CSS dengan kaskade, deklarasi terakhir menang jika memiliki kekhususan yang sama. Karena kedua deklarasi transformasi berada dalam kumpulan aturan yang sama, inilah masalahnya.

Apa yang dilakukannya adalah ini:

  1. putar teks 90 derajat. Baik.
  2. terjemahkan 50% kali 50%. Ok, ini adalah properti yang sama seperti langkah pertama, jadi lakukan langkah ini dan abaikan langkah 1.

Lihat http://jsfiddle.net/Lx76Y/ dan buka di debugger untuk melihat deklarasi pertama ditimpa

Karena terjemahan menimpa rotate, Anda harus menggabungkannya dalam deklarasi yang sama: http://jsfiddle.net/Lx76Y/1/

Untuk melakukan ini, Anda menggunakan daftar transformasi yang dipisahkan spasi:

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

Ingat bahwa mereka ditentukan dalam rantai, jadi terjemahan diterapkan terlebih dahulu, lalu putar setelah itu.

David Storey
sumber
23
Saya telah menemukan bahwa perangkaian sangat penting untuk diingat. Bandingkan terjemahan yang diikuti oleh rotasi - jsfiddle.net/Mrjm8/3 - dengan rotasi yang diikuti oleh terjemahan - jsfiddle.net/Mrjm8/2
Lukas
Bagaimana cara kerjanya saat ditulis dalam HTML, bukan CSS?
JakeTheSnake
2
@JakeThe tidak. Transformasi CSS adalah fitur CSS.
Stijn de Witt
2
Wow Terimakasih. Anda harus berani pada aspek chaining :) yang merupakan elemen kunci yang tidak pernah disebutkan oleh banyak blog dan spesifikasi!
cgatian
@ Luke Terima kasih telah menunjukkannya, urutannya sangat penting!
Yami Odymel
12

Saya tidak bisa berkomentar jadi begini. Tentang jawaban @David Storey.

Hati-hati dengan "urutan eksekusi" di rantai CSS3! Urutannya dari kanan ke kiri, bukan dari kiri ke kanan.

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

The rotateOperasi dilakukan terlebih dahulu, maka translate.

Lihat: CSS3 mengubah urutan penting: operasi paling kanan dulu

darthRods
sumber
4

Tidak perlu untuk itu, karena Anda dapat menggunakan 'mode penulisan' css dengan nilai 'vertikal-lr' atau 'vertikal-rl' sesuai keinginan.

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

CSS: mode menulis

biojazzard
sumber
2

Sesuatu yang mungkin terlewatkan: dalam proyek chaining saya, ternyata daftar yang dipisahkan spasi juga membutuhkan titik koma yang dipisahkan spasi di bagian akhir.

Dengan kata lain, ini tidak berhasil:

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

tapi ini:

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