Bagaimanakah Perintah Transformasi Mempengaruhi Transformasi CSS 3D, Terutamanya Perspektif?

Transformasi 3D CSS: Peletakan Perspektif dan Susunan Transformasi

Dalam CSS, sifat perspektif mempengaruhi cara transformasi 3D digunakan pada elemen. Walau bagaimanapun, pengguna telah memerhatikan bahawa menukar kedudukan tetapan perspektif boleh memberi kesan kepada hasil transformasi.

Penjelasan Masalah

Jujukan di mana transformasi digunakan adalah penting. Mengikut spesifikasi CSS, matriks transformasi dikira dengan menggunakan transformasi dalam sifat 'transform' dari kiri ke kanan. Jika perspektif ditetapkan pada penghujung sifat 'transform', terjemahan berlaku sebelum mempertimbangkan perspektif.

Transform Order

Untuk mengelakkan isu ini, perspektif hendaklah sentiasa diletakkan dahulu dalam sifat 'transform'. Dengan berbuat demikian, perspektif digunakan sebelum sebarang transformasi lain, memastikan terjemahan berlaku dengan betul.

Contoh

Pertimbangkan kod berikut:

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

Dalam kotak pertama, perspektif ditetapkan sebelum terjemahan, memastikan terjemahan berlaku dengan perspektif yang digunakan. Dalam kotak kedua, perspektif ditetapkan selepas terjemahan, menyebabkan terjemahan digunakan tanpa mengambil kira perspektif.

Nota Tambahan

• Meletakkan perspektif dalam elemen itu sendiri adalah tidak perlu.
• Tertib transformasi lain (cth., putar, skala) adalah juga ketara. transformasi yang digunakan kemudian dalam jujukan mungkin mempengaruhi yang digunakan lebih awal.

Atas ialah kandungan terperinci Bagaimanakah Perintah Transformasi Mempengaruhi Transformasi CSS 3D, Terutamanya Perspektif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!