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