Warum funktioniert Z-Index nicht mit Pseudoelementen mit Transformation?

Z-Index wirkt sich nicht auf den Außenring aus

Beim Versuch, einen Außenring mithilfe von CSS hinter einen Kreis zu verschieben, kann es zu einem Problem kommen Die Z-Index-Eigenschaft scheint unwirksam zu sein. In diesem Fall liegt das Problem darin, dass die Transformationseigenschaft auf die Pseudoelemente angewendet wird.

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

Um dieses Problem zu beheben, müssen Sie die Transformationseigenschaft entfernen und sie durch alternative Positionierungsmethoden, wie z. B. Anpassen, ersetzen B. die oberen und linken Koordinaten oder die Verwendung der absoluten Positionierung mit berechneten Werten.

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

Durch diese Änderungen sollten Sie die Kontrolle über die Z-Index-Eigenschaft wiedererlangen und in der Lage sein, das Pseudoelement effektiv hinter den Kreis zu verschieben wie beabsichtigt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Z-Index nicht mit Pseudoelementen mit Transformation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!