Mengapa Z-Index Tidak Berfungsi pada Pseudo-Elements dengan Transform?

Z-Index Tidak Mempengaruhi Lingkaran Luar

Apabila cuba mengalihkan gelang luar di belakang bulatan menggunakan CSS, anda mungkin menghadapi masalah di mana sifat indeks-z nampaknya tidak berkesan. Dalam kes ini, masalahnya terletak pada sifat transformasi yang digunakan pada elemen pseudo.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

Untuk mengatasinya, anda perlu mengalih keluar sifat transformasi dan menggantikannya dengan kaedah penentududukan alternatif, seperti melaraskan koordinat atas dan kiri atau menggunakan kedudukan mutlak dengan nilai yang dikira.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

Dengan membuat perubahan ini, anda harus mendapatkan semula kawalan ke atas sifat indeks-z dan dapat mengalihkan elemen pseudo di belakang bulatan dengan berkesan seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Z-Index Tidak Berfungsi pada Pseudo-Elements dengan Transform?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!