3D 변환은 z-index 스태킹 순서에 어떤 영향을 줍니까?

3D 변환 및 Z-색인: 수수께끼 풀기

CSS에서 특히 Translate3d를 통해 웹킷 변환을 활용할 때 불일치가 발생할 수 있습니다. Z-색인의 동작은 요소의 스택 순서에 영향을 미칩니다.

In 귀하의 경우, Translate3d를 사용하여 두 개의 겹치는 div를 화면에서 끄고 다시 애니메이션화했습니다. 그러나 변환 후 div는 규정된 z-인덱스 우선순위를 잃었습니다.

이는 z축에 3D 변환(즉,translate3d의 세 번째 매개변수)을 적용할 때 기존 2D z-인덱스가 메커니즘이 더 이상 적용되지 않습니다. 3D 렌더링 평면에서 계층 구조는 각 요소의 z 값에 따라 결정되며 Z 인덱스를 효과적으로 재정의합니다.

이를 수정하려면 다음 두 가지 옵션이 있습니다.

1. 플랫 렌더링으로 전환: 변환 스타일 속성을 플랫으로 설정하면 하위 요소에 대해 2D 렌더링으로 되돌릴 수 있습니다. 이렇게 하면 브라우저가 Z-인덱스 값의 우선순위를 다시 지정하게 됩니다.
2. 3D에서 스택 순서 복제: 불행하게도,translate3d의 세 번째 매개변수는 3D 공간에서 스택 순서를 복제하지 않습니다. 원하는 스택 순서를 얻으려면 각 요소의 z 값을 수동으로 조정해야 합니다.

추가 컨텍스트:

WebKit 버그 보고서(https 자세한 내용은 //bugs.webkit.org/show_bug.cgi?id=61824)를 참조하세요. Insights.

대상 브라우저:

iPhone/iPad 및 Android 브라우저 모두 웹킷 전환을 지원하므로 이러한 환경에서 문제가 해결되는 것을 확인해야 합니다.

위 내용은 3D 변환은 z-index 스태킹 순서에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!