3D CSS 변환을 사용할 때 요소 잘림 방지

Question

3D CSS 변환을 사용할 때 두 요소가 잘리는 것을 방지하는 데 문제가 있습니다. 누구가 전에이 문제를 발견하고 해결책을 찾았습니까? 또한 사파리의 데스크톱 버전에서 발생하지만,이 일이 왜 안

내가 이해 OS X의에 크롬, 심지어 그 -

나는이 문제를 설명하기 위해 최신 버전의 iOS에서 스크린 샷을 첨부 이것은 특정 상황에서는 올바른 동작이지만 다른 브라우저에서 일치하지 않습니다. 어떤 도움

감사합니다 :)

Answer 1

이 같은 3D 레이어 내 두 요소를 렌더링에 의해 발생합니다. 해결책은 각각의 계층에서 렌더링하는 것입니다.

이 문제가 발생하는 코드의 단순화 된 버전입니다 :

CSS :

.wrapper { 
    transform-style: preserve-3d; 
    perspective: 1000; 
} 

.rotate { 
    width: 100px; 
    height: 100px; 
    background: grey; 
    transform: rotateX(45deg); 
} 

.clipped-element { 
    width: 30px; 
    height: 30px; 
    background: blue; 
} 

HTML :

<div class="wrapper"> 
    <div class="rotate"> 
     <div class="clipped-element"></div> 
    </div> 
</div> 

transform-style 및 perspective 나 '를 사용하여 렌더링 레이어를 만들었습니다. .clipped-element은이 레이어의 일부이므로 같은 3D 공간에 존재합니다.

클리핑 된 요소를 자체 레이어로 이동하면 자체 3D 공간에 존재하므로 클리핑 문제가 발생하지 않습니다.

CSS :

.wrapper { 
    width: 200px; 
    height: 200px; 
} 

.rotate__wrapper { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    perspective: 1000; 
} 

.rotate { 
    width: 100px; 
    height: 100px; 
    background: grey; 
    transform: rotateX(45deg); 
} 

.clipped-element { 
    width: 30px; 
    height: 30px; 
    background: blue; 
} 

HTML : 나는 an example on CodePen을 만든

<div class="wrapper"> 
    <div class="rotate__wrapper"> 
     <div class="rotate"></div> 
    </div> 
    <div class="clipped-element"></div> 
</div> 

.