Transform 3d with CSS3

Question

I don't understand why the 3D visualization of the following example is wrong. I translate background divs of 10px in Z and the foregound divs of 0px. The result is that the divs are not visualized as expected: the second background is over the first buckground, anyone can explain it?

 .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

Use z-index and position: relative; in your .background and .foreground elements:

 .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>