변환 및 스태킹 순서

Question

CSS의 "3D"세계가 실제로 무엇인지 이해하려고합니다. 나는 나를 가장입니다 버그 간단한 example

특히 코드를 만들어 :

.back { 
    background-color: tomato; 
    transform: rotateY(180deg); 
    z-index: 1; 
} 

나에게 분명하지 않다 건은 왜 .inner 위에 마우스를 할 때, 그 배경 색상 (금) 보이지 않습니까 ?? .back에서 transform 속성을 제거하거나 rotateY를 0으로 설정하면 .inner의 금색 배경색이 선명하게 표시됩니다. .back의 변형 속성이 겹침 순서를 변경하는 이유는 무엇입니까?

논리적으로 어린이 (. front 및 .back)가 부모 (.inner) 앞에 나타나야한다는 의미입니다.

또한 변형 스타일을 평면으로 설정하면 실제로 어떤 일이 발생하는지 알고 싶습니다. 그것은 부모와 모든 자녀를 가장 높은 스태킹 순서를 갖는 요소가 우선 순위/가시성을 갖는 단일 "단위"로 붕괴 시키게합니까? 코드에서

Answer 1

: 당신이

transform: rotateY(180deg) translateZ(10px); 

변환은 오른쪽에서 왼쪽으로 적용을 사용하는

.outer { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid gold; 
 
    perspective: 1000px; 
 
    padding: 10px; 
 
    margin: 0 auto; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    transition: transform 2s linear; 
 
    transform-style: preserve-3d; 
 
    background-color: gold; 
 
    backface-visibility: visible; 
 
    transform: rotateY(50deg); 
 
} 
 

 
.sides { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    color: white; 
 
    backface-visibility: hidden; 
 
} 
 

 
.front { 
 
    background-color: blue; 
 
    transform: translateZ(20px) 
 
} 
 

 
.back { 
 
    background-color: tomato; 
 
    transform: rotateY(180deg) translateZ(10px); 
 
} 
 

 
.inner:hover { 
 
    transform: rotateY(180deg) 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="sides front">Front Side</div> 
 
    <div class="sides back">Back Side</div> 
 
    </div> 
 
</div>

, 그래서 먼저 전면 10px로 이동합니다. 그러나 그 후 180도 회전합니다. (상수 인 변환 원점 주변). 그러면 이전 10 픽셀이 앞으로가 아닌 뒤쪽으로 이동합니다.

순서는 이제 회전이 먼저 수행 역

transform: translateZ(10px) rotateY(180deg); 

이기 때문에 그것을 번역하여 unafected이고 전방으로 이동하는 경우. 당신이 3D 변환을 사용하려면

및 없음, 죄송합니다, Z- 인덱스는, 3 차원 변환을위한 대체하지 않습니다, 번역은 .... 처음에

갈 수있는 유일한 방법입니다 쉽게

codepen with z-index removed

당신이

backface-visibility: hidden; 

,691,363 설정되어 있기 때문에이 작동 볼 수있는 예는, Z-지수는 쓸모가210

앞면을 향하고있는 얼굴 만 볼 수 있습니다.