如何使用CSS变换以正确的角度将两个或更多个立方体彼此相邻放置？

Question

我在代码沙箱中具有此项目设置：

屏幕截图（如果更改视口大小，则立方体看起来不会像这样）

目标：

我的目标是能够将立方体彼此相邻或彼此顶部放置，并像堆满卡车的后部一样保持堆叠：从卡车的深端开始，将罐子装满第一层有盒子，然后堆叠在顶部直到天花板；像这样一直堆放在箱子的前面，直到卡车装满为止。

此外，如果缩放屏幕，则多维数据集的位置仍应看起来像是彼此相邻（在我的示例中，您可以看到情况并非如此）。

我们可以使用Vue或Javascript来计算使用CSS无法计算的内容，但是我们尝试尽可能多地使用CSS。

数据：

我的标记是这样的

<div class="container">
  <div class="cubes-container">
    <!-- for each cube --->
    <div class="cube-wrap" >
        <div class="cube depth cube-isometric">
          <div class="front-pane">cube 1</div>
          <div class="back-pane">back 1</div>
          <div class="top-pane">top 1</div>
          <div class="bottom-pane">bottom 1</div>
          <div class="left-pane">left 1</div>
          <div class="right-pane">right 1</div>
        </div>
    </div>
  </div>
</div>

将多维数据集放在第一个多维数据集的右侧不是一个好主意，这仅适用于某些分辨率：

.cube-wrap:nth-child(2) .cube {
    transform: translate3d(142.5px, 50px, 125px) rotateX(-30deg) rotateY(-45deg);
    transform-style: preserve-3d;
}

我在左侧的控件也不是很好。他们正在更改left的{​​{1}}和top值。如果输入数字，则可以看到立方体在移动。另外，如果添加一个多维数据集，您可以看到第三个登陆在 origin 上。我将使用这些控件来测试多维数据集的位置。

我尝试在容器上设置透视图，以便从该透视图中查看所有多维数据集：

.cube-wrap

我的多维数据集CSS就是这样的（为了节省空间，删除了支持的CSS -ms或-moz），我从https://davidwalsh.name/css-cube获得了这个多维数据集

.container {
  position: absolute;
  left: 240px;
  top: 0;
  bottom: 0;
  right: 0;
  background: grey;
  perspective: 1000px;
  perspective-origin: 50% 100px;
}

如何纠正透视图以使其正常运行？我不知道它们应该在2d空间中确切地位于何处以产生3d幻觉，或者哪种旋转和透视组合会产生3d幻觉。

Answer 1

从一个面开始构建多维数据集，然后在与基础相同的位置开始构建其他面，但是旋转或平移它们。

然后可以使用flex或最适合您的东西在2d空间中布局多维数据集

然后给容器指定您喜欢的方向。

将鼠标悬停在容器上以折叠面并更好地了解基本布局

UIViewControllers

pageViewController.setViewControllers