用CSS3变换3d

Question

我不明白为什么下面例子的3D可视化是错误的。我在Z中翻译10px的背景div，并在0px的foregound divs中翻译。结果是divs没有按预期显示：第二个背景是第一个背景，任何人都可以解释它？

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