不，这对于纸之类的东西是可能的，但z轴更像是一堆盘子，就像是把盘子堆起来，让下面的盘子也在上面，这是不可能的。
你可以尝试“欺骗”一个解决方案的唯一方法是复制底部元素（黄色），把它一直提升到顶部，然后用某种方法屏蔽它，这样它看起来就像是在红色下面和绿色上面一样。我不确定你在实际应用程序中想做什么，但是我建议你只用一个图像来达到这个效果。
但是没有办法让这三个div按照你描述的方式工作。

指定不同的z轴：

.red {
 z-index : 3;
}
.yellow {
 z-index : 2;
}
.green {
 z-index : 1;
}

如果您为两个div设置相同的z索引，那么它们在HTML代码中的位置将决定它们的位置（最后在前面的主体中）

您可以像在黄色上使用z轴那样在红色和绿色上使用z轴，将黄色的z轴更改为0，将绿色的z轴定义为-1，将红色的z轴定义为1。

解决这个问题的一个方法是使用一个额外的div来关闭最后一个div的位置，我给你看了一个示例代码：

.contain {
        position: relative;
        padding: 20px;
      }
      div {
        width: 100px;
        height: 400px;
      }
      .red {
        position: absolute;
        background: red;
        left: 220px;
        transform: rotate(-33deg);
        z-index: 2;
      }
      .yellow {
        position: absolute;
        background: yellow;
        transform: rotate(90deg);
        top: 140px;
        left: 160px;
        z-index: 1;
      }
      .greenOut {
        height: 200px;
        z-index: 3;
        background: green;
        transform: rotate(34deg);
        position: absolute;
        left: 138px;
        top: 34px;
      }
      .green {
        position: absolute;
        background: green;
        transform: rotate(34deg);
        left: 80px;
      }

<div class="contain">
      <div class="red"></div>
      <div class="yellow"></div>
      <div class="green"></div>
      <div class="greenOut"></div>
    </div>

是的，绝对有一种方法可以用纯CSS做到这一点。
将DIV放入具有高perspective值的容器中（以使透视缩短最大化），并相应地在其y轴上旋转内部DIV;下面是一个快速演示：

* {
  box-sizing:border-box;
  outline:none
}
.group {
  position:relative;
  perspective: 10000px;
  transform-style: preserve-3d;
  perspective-origin: center center;  
}
.group > div {
  width:400px;
  height:90px;
  position:relative;
}
.red {
  background:red;
  transform: rotateZ(65deg) rotateY(-5deg) translateY(-160px) translateX(50px);
  transform-origin: 0;
}
.blue {
  background:blue;
  transform: rotateZ(-65deg) rotateY(-39deg)  translateY(160px) translateX(-250px) scaleX(1.25);
  transform-origin: 0;
}
.lime {
  background:lime;
  transform: rotateY(5deg) translateY(60px);
  transform-origin: 0;
}

<div class="group">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="lime"></div>
</div>