Mengapa Susunan `perspective()` dalam CSS `transform` Penting untuk Transformasi 3D?

Transformasi 3D CSS: Interaksi Perspektif

Apabila menggunakan transformasi 3D dalam CSS, susunan pelaksanaan memainkan peranan yang penting. Ini amat relevan apabila menggunakan fungsi perspective().

Penerangan Masalah

Seorang pengguna telah memerhatikan bahawa sifat transform menunjukkan kesan yang berbeza bergantung pada sama ada perspektif() fungsi diisytiharkan pada permulaan atau akhir nilai harta. Tingkah laku ini telah disaksikan dalam kedua-dua pelayar Chrome dan Firefox.

Punca Punca

Mengikut spesifikasi CSS, matriks transformasi dikira dengan menggunakan fungsi transformasi dari kiri ke kanan. Apabila fungsi perspektif() diletakkan pada penghujung, ia digunakan selepas semua transformasi lain, seperti terjemahan. Ini menyebabkan terjemahan dilakukan tanpa mengambil kira perspektif.

Penyelesaian

Untuk memastikan transformasi 3D yang tepat, adalah penting untuk menentukan fungsi perspektif() pada permulaan harta transformasi nilai.

Contoh:

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 contoh ini, kotak pertama akan diterjemahkan dalam ruang 3D dengan kesan perspektif digunakan, manakala kotak kedua tidak akan gunakan perspektif.

Tambahan Pertimbangan:

• Adalah tidak disyorkan untuk menggunakan sifat perspektif dalam elemen yang sedang mengalami transformasi. Ini mungkin membawa kepada keputusan yang tidak dijangka.
• Tertib fungsi transformasi adalah penting dan boleh menjejaskan hasilnya. Adalah penting untuk mencuba dan meneroka kesan jujukan yang berbeza.

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