Bagaimanakah Transformasi 3D Mempengaruhi Susunan Susunan indeks-z?

Transformasi 3D dan Indeks Z: Membongkar Misteri

Apabila menggunakan transformasi webkit dalam CSS, terutamanya melalui translate3d, ketidakkonsistenan boleh timbul dalam tingkah laku indeks-z, mempengaruhi susunan tindanan unsur.

Dalam kes anda, anda menggunakan translate3d untuk menghidupkan dua div bertindih dan kembali ke skrin. Walau bagaimanapun, selepas transformasi, div kehilangan keutamaan indeks z yang ditetapkan.

Ini berlaku kerana apabila anda menggunakan transformasi 3D pada paksi z (iaitu, parameter ketiga translate3d), indeks z 2D tradisional mekanisme tidak lagi terpakai. Dalam satah pemaparan 3D, hierarki ditentukan oleh nilai z bagi setiap elemen, dengan berkesan mengatasi indeks z.

Untuk membetulkannya, anda mempunyai dua pilihan:

1. Tukar kepada Perenderan Rata: Dengan menetapkan sifat gaya transformasi kepada rata, anda boleh kembali kepada pemaparan 2D untuk elemen kanak-kanak. Ini memaksa penyemak imbas untuk mengutamakan nilai indeks-z sekali lagi.
2. Replikat Susunan Tindanan dalam 3D: Malangnya, parameter ketiga translate3d tidak mereplikasi susunan tindanan dalam ruang 3D. Anda perlu melaraskan nilai z setiap elemen secara manual untuk mencapai susunan tindanan yang diingini.

Konteks Tambahan:

Rujuk laporan pepijat WebKit (https ://bugs.webkit.org/show_bug.cgi?id=61824) untuk maklumat lanjut cerapan.

Sasaran Penyemak Imbas:

Kedua-dua penyemak imbas iPhone/iPad dan Android menyokong peralihan webkit, jadi anda seharusnya melihat isu itu diselesaikan dalam persekitaran ini.

Atas ialah kandungan terperinci Bagaimanakah Transformasi 3D Mempengaruhi Susunan Susunan indeks-z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!