CSS가 3D 역 형제 요소 스택 순서를 어떻게 변환할 수 있습니까?

CSS를 사용하여 형제 요소 스태킹 순서 반전을 달성하고 3D를 변환하는 방법

문제를 이해하면 하위 요소가 일관되게 유지되도록 하는 것이 목표입니다. DOM 트리 내의 위치에 관계없이 상위 항목 뒤에 나타납니다. Z-인덱싱은 적합한 솔루션처럼 보일 수 있지만 이러한 시나리오에서는 종종 비효율적인 것으로 판명됩니다.

이 문제를 해결하고 원하는 스택 순서 반전을 달성하기 위해 이제 최신 브라우저는 3D 변환을 활용하는 강력한 기술을 제공합니다. 및 CSS.

아래 CSS를 고려하세요. 조각:

.parent {
    background: red;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    position: relative;
}

.child {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translateZ(-10px);
}

이 예에서 상위 요소에는 빨간색 배경과 100x100픽셀 크기가 할당됩니다. 상대적으로 위치가 지정되고 3D 스택 컨텍스트를 생성하기 위해 변환 스타일: 보존-3d 속성을 활용합니다.

반면 하위 요소에는 파란색 배경과 동일한 크기가 지정됩니다. 약간의 음수 위쪽 및 왼쪽 오프셋을 사용하여 상위 항목 내에 절대적으로 위치합니다. 결정적으로, 부모의 변환 스타일 속성에 의해 생성된 3D 공간에서 z축을 따라 10px 뒤로 이동하는 변환:translateZ(-10px) 속성이 할당됩니다.

결과적으로, DOM 트리 내의 위치에 있는 하위 요소는 z축의 음수 변환으로 인해 상위 요소 뒤에 효과적으로 나타납니다. 이 기술은 스택 순서를 효과적으로 역전시켜 하위 항목이 항상 상위 항목 뒤에 있도록 합니다.

위 내용은 CSS가 3D 역 형제 요소 스택 순서를 어떻게 변환할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!