根据位置重叠元素，从外向内螺旋排列元素？-解网

问：

我正在尝试制作一个带有透视的立方体网格，但是当立方体位于底部或右侧时，两侧会与其后面的另一个立方体重叠。我怎样才能使中间的立方体优先于外面的立方体？这需要放大和缩小，所以我不能只对所有元素做一个简单的 z 索引，因为立方体的数量会发生变化。这是一个 codepen

HTML：（为了简洁起见，省略了许多框，将来会根据 JS 的屏幕尺寸来更改数量，例如检查 Codepen 有更多框）

* {
  margin: 0;
}

.boxcontainer {
  position: relative;
  width: 100dvw;
  height: 100dvh;
  perspective: 300px;
}

.box {
  position: relative;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  display: inline-block;
  transition: 5s;
}

.box * {
  width: 100px;
  height: 100px;
  position: absolute;
}

.box .top {
  transform: rotateX(90deg) translateZ(50px) translateY(-50px);
  background-color: blue;
}

.box .bottom {
  transform: rotateX(-90deg) translateZ(50px) translateY(50px);
  background-color: green;
}

.box .left {
  transform: rotateY(-90deg) translateZ(50px) translateX(-50px);
  background-color: red;
}

.box .right {
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
  background-color: yellow;
}

.box .front {
  background-color: gray;
}

.box:hover {
  transform: translateZ(30px);
  transition: 0.3s;
}

<div class="boxcontainer">
  <div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
  </div>
  <div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
  </div>
</div>

我认为这可以通过从外向内将立方体排列成某种螺旋形来完成，但我不知道如何做到这一点。我到处搜索，但似乎找不到任何有同样问题的人。如果可能的话，最好 id 主要使用纯 CSS。最坏的情况是，我可以将透视原点设置在右下角的某个地方，但我真的不喜欢它的外观......

ps：这是我在这里的第一篇帖子，如果我做错了什么，请告诉我，这样我就不会再这样做了:)

HTML CSS格式

根据位置重叠元素，从外向内螺旋排列元素？

Overlap elements based on position, arrange elements in spiral from outside in?

评论