Bagaimana untuk menggunakan pelbagai transformasi dalam CSS?

Question

Bagaimana cara saya menggunakan berbilang mengubah

Contoh: Yang berikut hanya menggunakan terjemahan, bukan putaran.

li:nth-child(2) {
    mengubah: berputar (15deg);
    transform: translate(-20px,0px);
}

Answer 1

Saya menambah jawapan ini bukan kerana ia mungkin membantu, tetapi kerana ia benar.

Selain menggunakan jawapan sedia ada untuk menerangkan cara melakukan pelbagai terjemahan melalui pautan, anda boleh membina matriks 4x4 sendiri

Saya menunjukkan matriks putaran daripada beberapa tapak rawak yang saya temui semasa menggoog:

Putar mengelilingi paksi-x:
Putar mengelilingi paksi-y:
Putar mengelilingi paksi z:

Saya tidak menemui contoh terjemahan yang baik, jadi dengan mengandaikan saya ingat/faham dengan betul, terjemahannya:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Lihat artikel Wikipedia tentang transformasi dan Tutorial CSS3 Pragamatik yang menerangkan perkara ini dengan sangat baik. Panduan lain yang saya temui yang menerangkan matriks putaran arbitrari ialah nota Egon Rath pada matriks

Sudah tentu, pendaraban matriks boleh dilakukan antara matriks 4x4 ini, jadi untuk melakukan putaran dan terjemahan anda perlu mencipta matriks putaran yang sesuai dan mendarabkannya dengan matriks terjemahan.

Ini memberi anda lebih kebebasan untuk melakukannya dengan betul, dan juga menjadikannya hampir mustahil untuk sesiapa sahaja memahami perkara yang dilakukannya, termasuk anda selama lima minit.

Tetapi, anda tahu, ia berkesan.

Sunting: Saya baru menyedari bahawa saya mungkin terlepas penggunaan yang paling penting dan praktikal, iaitu langkah demi langkah mencipta transformasi 3D yang kompleks melalui JavaScript, di mana perkara itu akan menjadi lebih masuk akal.

Answer 2

Anda perlu meletakkannya pada satu baris seperti ini:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Apabila anda mempunyai berbilang arahan transformasi, hanya yang terakhir digunakan. Sama seperti peraturan CSS yang lain.

---

Ingat, pelbagai transformasi dalam satu baris digunakan dari kanan ke kiri.

Ini:变换：scale(1,1.5)rotate(90deg);
dan: 变换：旋转(90deg)缩放(1,1.5);

akan tidak menghasilkan hasil yang sama:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>