Преобразование 3d с CSS3

Question

Я не понимаю, почему 3D-визуализация следующего примера неверна. Я переводим фоновые divs из 10px в Z и div div of 0px. Результат состоит в том, что divs не визуализируются так, как ожидалось: второй фон находится над первым buckground, кто-нибудь может это объяснить?

.parallax { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    perspective: 10px; 
 
} 
 

 
.background { 
 
    height: 100px; 
 
    background-color: #080; 
 
    transform-style: preserve3d; 
 
    transform: translateZ(-10px) rotateY(5deg); 
 
} 
 

 
.foreground { 
 
    height: 300px; 
 
    transform-style: preserve3d; 
 
    transform: translateZ(0px) rotateY(5deg); 
 
    background-color: #008; 
 
}

<div class="parallax"> 
 
    
 
    <div class="background"></div> 
 
    <div class="foreground"></div> 
 
    
 
    <div class="background"></div> 
 
    <div class="foreground"></div> 
 
    
 
</div>

Answer 1

z-index Использование и position: relative; в ваших .background и .foreground элементов:

.parallax { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    perspective: 10px; 
 
} 
 

 
.background { 
 
    position: relative; 
 
    z-index: 0; 
 
    height: 100px; 
 
    background-color: #080; 
 
    transform-style: preserve3d; 
 
    transform: translateZ(-10px) rotateY(5deg); 
 
} 
 

 
.foreground { 
 
    position: relative; 
 
    z-index: 1; 
 
    height: 300px; 
 
    transform-style: preserve3d; 
 
    transform: translateZ(0px) rotateY(5deg); 
 
    background-color: #008; 
 
}

<div class="parallax"> 
 
    
 
    <div class="background"></div> 
 
    <div class="foreground"></div> 
 
    
 
    <div class="background"></div> 
 
    <div class="foreground"></div> 
 
    
 
</div>