`translate3d`는 CSS `z-index`에 어떻게 영향을 미치고 스택 순서를 어떻게 유지할 수 있습니까?

3D 변환이 CSS z-Index에 미치는 영향

겹치는 절대 위치 요소로 작업할 때 스택을 제어하려면 z-index 속성이 필수적입니다. 주문하다. 그러나 Translate3d WebKit 변환을 사용하면 이 컨트롤이 손실됩니다.

설명

Translate3d 변환 중에 요소는 3D 공간에서 이동됩니다. 세 번째 매개변수(이 경우 -1px)에 값을 할당하면 요소가 z축을 따라 배치됩니다. 그러나 3D 공간의 이러한 고도는 Z-색인 값이 적용되는 방식을 변경하여 요소가 설정된 스택 순서를 무시하게 만듭니다.

스택 순서 유지

보존하려면 3D 변환 중 스택 순서를 조정하려면 CSS 속성인Transform-style: flat을 사용하세요. 해당 요소에 대해

구현 예

변환 전
웹킷 전환 값 설정:

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

변환 중
다음을 사용하여 애니메이션화 translate3d, 세 번째 매개변수가 z축을 따라 요소의 위치를 ​​평면화하도록 설정되었는지 확인:

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

변환 후
변환 스타일 적용: flat; 스택 순서를 유지하려면:

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

이 속성을 통합하면 요소가 변환 전 Z-인덱스 스택을 유지하여 다층 컨텍스트 내에서 올바른 표시가 가능해집니다.

위 내용은 `translate3d`는 CSS `z-index`에 어떻게 영향을 미치고 스택 순서를 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!