Mengapa Susunan `perspektif` dalam Transformasi 3D CSS Penting?

Transformasi 3D CSS dengan Perspektif di Penghujung: Memahami Sebab

Transformasi 3D CSS membolehkan animasi yang rumit dan kesan perspektif pada elemen web. Walau bagaimanapun, pemerhatian ingin tahu muncul apabila sifat perspektif diletakkan pada penghujung senarai transformasi.

Masalah:

Dalam coretan yang disediakan, dua kotak mempunyai tuding yang berbeza tingkah laku. Sifat perspektif diletakkan pada penghujung senarai transformasi untuk kotak pertama, sementara ia mendahului transformasi untuk kotak kedua:

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

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

Ini menghasilkan hasil visual yang berbeza walaupun kedua-dua transformasi kelihatan sama.

Jawapan:

Kunci untuk memahami tingkah laku ini terletak pada susunan di mana matriks transformasi dikira. Mengikut spesifikasi Transform CSS, matriks dikira seperti berikut:

1. Mulakan dengan matriks identiti.
2. Terjemah dengan X dan Y yang dikira dari asal-ubah.
3. Darab dengan setiap fungsi transformasi dalam sifat transformasi dari kiri ke kanan.
4. Terjemah dengan dinafikan dikira nilai X dan Y bagi asal-ubah.

Penjelasan:

Dalam langkah 3, adalah penting untuk menggunakan transformasi daripada kiri ke betul. Ini bermakna apabila perspektif diletakkan di hujung senarai, terjemahan dilakukan sebelum perspektif digunakan.

Akibatnya, terjemahan berlaku tanpa ketiadaan kesan perspektif, itulah sebabnya terhasilnya pergerakan kelihatan rata dan tanpa kedalaman.

Implikasi:

• Sentiasa letakkan sifat perspektif pada permulaan senarai transformasi untuk memastikan ia digunakan sebelum sebarang transformasi lain.
• Elakkan menggunakan sifat perspektif dalam elemen yang ingin anda ubah, kerana ia tidak akan mempunyai kesan.

Dengan mengikuti garis panduan ini, anda boleh mencapai kesan transformasi 3D yang diingini dengan aplikasi yang betul bagi sifat perspektif.

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