如何用CSS实现分层块？现有3D方案问题及优化简化咨询

需要实现斜向堆叠的图层效果，但当前代码中第一个深色图层完全遮挡了后面的图层，无法正常显示堆叠视觉。现有代码如下：

现有CSS代码 #

body {
    margin: 0;
    background: #b4e0e1;
}

.layer-container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -250px;
    perspective: 500px;
   transform-style: preserve-3d;
}

.layer {
    width: 500px;
    height: 250px;
    position: absolute;
    transition: all 1.5s ease-in-out;
    cursor: pointer;
    z-index: 1;
}

.dark-blue-layer {
    background: #234688;
}

.light-blue-layer {
    background: #2abfd5;
}

.white-layer {
    background: #fff;
}

.bottom-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(0px);
}

.mid-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(20px);
}

.top-layer {
    transform: rotateX(0deg) rotateY(-25deg) translateX(40px);
}

现有HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
<div class="layer-container stacked-top">
        <div class="layer bottom-layer dark-blue-layer"></div>
        <div class="layer mid-layer light-blue-layer"></div>
        <div class="layer top-layer white-layer"></div>
</div>
  </body>
</html>

一、优化现有3D变换方案 #

问题核心：仅通过translateX做X轴偏移，但未在Z轴方向拉开图层间距，加上所有图层z-index相同，导致前面的图层完全遮挡后方元素。调整步骤如下：

1. 添加Z轴位移：通过translateZ让图层在3D空间中前后错开，配合rotateY实现自然堆叠，避免遮挡。
2. 优化容器居中：用transform: translate(-50%, -50%)替代margin偏移，实现更精准的居中。
3. 调整透视值：增大perspective让3D效果更自然。

修改后的CSS代码：

body {
    margin: 0;
    background: #b4e0e1;
}

.layer-container {
    width: 500px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 800px;
    transform-style: preserve-3d;
}

.layer {
    width: 500px;
    height: 250px;
    position: absolute;
    transition: all 1.5s ease-in-out;
    cursor: pointer;
}

.dark-blue-layer {
    background: #234688;
    transform: rotateY(-25deg) translateX(0) translateZ(-40px);
}

.light-blue-layer {
    background: #2abfd5;
    transform: rotateY(-25deg) translateX(20px) translateZ(-20px);
}

.white-layer {
    background: #fff;
    transform: rotateY(-25deg) translateX(40px) translateZ(0);
}

二、更简单的2D变换实现方案 #

如果不需要3D交互效果，仅实现静态堆叠，用2D变换即可完成，无需3D属性，代码更简洁且兼容性更好：

body {
    margin: 0;
    background: #b4e0e1;
}

.layer-container {
    width: 500px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layer {
    width: 500px;
    height: 250px;
    position: absolute;
    transition: all 1.5s ease-in-out;
    cursor: pointer;
    transform: rotate(-3deg);
}

.dark-blue-layer {
    background: #234688;
    top: 0;
    left: 0;
    z-index: 1;
}

.light-blue-layer {
    background: #2abfd5;
    top: 15px;
    left: 15px;
    z-index: 2;
}

.white-layer {
    background: #fff;
    top: 30px;
    left: 30px;
    z-index: 3;
}

HTML结构保持原有顺序即可，通过top/left偏移+z-index控制堆叠层级，配合轻微旋转即可还原设计图效果。

内容的提问来源于stack exchange，提问作者Michael