`overflow: Hidden`이 `transform: scale`이 상위 요소에 적용될 때 하위 요소를 자르는 이유는 무엇입니까?

transform: scale을 사용하여 오버플로 및 확대/축소 효과 처리

CSS3 변환 작업 시, 변환: 스케일과 오버플로를 결합할 때 수수께끼 문제가 나타납니다. : 상위 컨테이너의 숨겨진 및 테두리 반경. 관찰한 바와 같이 하위 요소가 상위 요소의 경계를 넘어 확장되어 보기 흉한 오버플로를 일으키는 것으로 보입니다.

문제 이해

이 특이한 동작은 다음을 통해 확장된다는 사실에서 비롯됩니다. 변환: 크기는 요소의 렌더링된 크기에 영향을 주지만 표시 트리 내의 실제 흐름에는 영향을 주지 않습니다. 결과적으로,overflow:hidden이 상위 요소에 적용되면 크기 조정되지 않은 원래 크기를 기준으로 하위 요소를 자르려고 시도합니다. 이로 인해 예상치 못한 클리핑이 발생합니다.

해결 방법 찾기: 변환: 변환Z(0)

이 문제를 해결하기 위해 CSS 성능 기술에서는 변환: 변환Z(0)를 추가하는 것이 좋습니다. 래퍼 요소에. 이로 인해 브라우저는 요소를 3차원 렌더링 공간으로 처리하여 의도한 확대/축소 효과를 변경하지 않고 오버플로 문제를 해결합니다.

추가 리소스

의 경우 변환:translateZ(0)의 CSS 성능 영향에 대한 자세한 내용은 다음 리소스를 참조하세요.

• [CSS 성능:translateZ(0)](https://css-tricks.com /myth-busting-css-performance-translatez-0/)
• [CSS TranslateZ 속성 이해](https://developer.mozilla.org/en-US/docs/Web/CSS/transform- 기능/번역Z)

위 내용은 `overflow: Hidden`이 `transform: scale`이 상위 요소에 적용될 때 하위 요소를 자르는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!