Bagaimanakah `translate3d` Mempengaruhi CSS `z-index`, dan Bagaimana Saya Boleh Mengekalkan Susunan Susunan?

Impak Transformasi 3D pada CSS z-Index

Apabila bekerja dengan elemen kedudukan mutlak yang bertindih, sifat z-index adalah penting untuk mengawal tindanannya pesanan. Walau bagaimanapun, apabila menggunakan transformasi translate3d WebKit, kawalan ini hilang.

Penjelasan

Semasa transformasi translate3d, elemen dialihkan dalam ruang 3D. Dengan memberikan nilai kepada parameter ketiga (-1px dalam kes ini), elemen diletakkan di sepanjang paksi z. Walau bagaimanapun, ketinggian dalam ruang 3D ini juga mengubah cara nilai indeks-z digunakan, menyebabkan elemen mengabaikan susunan tindanan yang telah ditetapkan.

Mengekalkan Susunan Tindanan

Untuk mengekalkan susunan tindanan semasa transformasi 3D, gunakan gaya transformasi sifat CSS: rata; untuk elemen yang berkaitan.

Contoh Pelaksanaan

Sebelum transformasi
Tetapkan nilai peralihan webkit:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

Semasa transformasi
Animasikan menggunakan translate3d, memastikan parameter ketiga ditetapkan untuk meratakan kedudukan elemen di sepanjang paksi z:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, 0)' });

Selepas transformasi
Gunakan gaya transformasi: rata; untuk mengekalkan susunan tindanan:

element.css({ 'transform-style': 'flat' });

Dengan menggabungkan sifat ini, elemen akan mengekalkan tindanan indeks z pra-transformasinya, membenarkan paparan yang betul dalam konteks berbilang lapisan.

Atas ialah kandungan terperinci Bagaimanakah `translate3d` Mempengaruhi CSS `z-index`, dan Bagaimana Saya Boleh Mengekalkan Susunan Susunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!