Mengapa Susunan `perspective()` dalam CSS 3D Transforms Penting?

Kebiasaan Transformasi 3D CSS: Susunan Perspektif

Transformasi 3D CSS menyediakan pilihan yang mantap untuk memanipulasi elemen dalam tiga dimensi. Walau bagaimanapun, satu keanehan pelik telah diperhatikan: susunan fungsi perspektif() dalam sifat transformasi mempengaruhi transformasi yang terhasil.

Perkara Pesanan

Pertimbangkan kod berikut coretan:

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

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

Di sini, elemen bertujuan untuk bergerak masuk dan keluar dari skrin. Walau bagaimanapun, kesannya hanya kelihatan untuk kotak pertama, manakala yang kedua kekal tidak terjejas. Tingkah laku ganjil ini timbul kerana susunan fungsi perspektif() penting.

Pengiraan Transformasi

Mengikut spesifikasi CSS, matriks transformasi dikira daripada sifat transformasi mengikut susunan berikut:

1. Gunakan terjemahan yang ditentukan oleh transform-origin
2. Darab dengan setiap fungsi transformasi, dari kiri ke kanan
3. Transform songsang ditentukan oleh transform-origin

Ini bermakna fungsi perspective() mesti digunakan dahulu (iaitu, paling kiri) untuk kesannya dipertimbangkan dengan betul.

Elakkan Perspektif dalam Elemen Berubah

Selain itu, adalah penting untuk mengelak daripada menggunakan sifat perspektif dalam elemen itu sendiri. Walaupun ini mungkin kelihatan logik, ia tidak perlu dan boleh membawa kepada hasil yang tidak dijangka.

Oleh itu, sentiasa pastikan bahawa fungsi perspektif() disenaraikan dahulu dalam sifat transformasi untuk mencapai transformasi 3D yang diingini.

Atas ialah kandungan terperinci Mengapa Susunan `perspective()` dalam CSS 3D Transforms Penting?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!