css - 如何使用 CSS 变换以正确的视角将两个或多个立方体并排放置？

Question

我在 Code Sandbox 中设置了这个元素:

屏幕截图(如果您更改视口(viewport)大小，立方体将不会看起来像那样):

目标:

我的目标是能够将立方体并排放置或相互叠放，并保持堆叠，就像在卡车后部装满东西一样:从卡车的深处开始，装满第一层有盒子，然后叠在上面直到天花板；像这样一直堆放在那些箱子前面，直到卡车装满为止。

此外，如果我们缩放屏幕，立方体的位置看起来应该仍然是彼此相邻的(在我的示例中您可以看到情况并非如此)。

我们可以使用 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;
}

我左边的控件也不是很好。他们正在更改 .cube-wrap 的 left 和 top 值。如果您输入一个数字，您可以看到立方体在移动。此外，如果您添加一个立方体，您可以看到第三个立方体落在原点。我打算使用这些控件来测试立方体的位置。

我尝试设置容器的视角以从该视角查看所有立方体:

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

我的立方体 CSS 是这样的(删除了支持的 css，如 -ms 或 -moz 以节省空间)我从 https://davidwalsh.name/css-cube 得到了这个立方体

.cube-isometric {
  transform: rotateX(-30deg) rotateY(-45deg);
  transform-origin: 50% 50% 0;
}
/*************** STANDARD CUBE ***************/

.cube {
  position: relative;
  width: 200px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: cube-spin 5s infinite linear;
}
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(38, 93, 79, 0.87);
  box-shadow: inset 0 0 30px #c7ffb6;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  text-transform: uppercase;
}
.depth div.back-pane {
  transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
.depth div.left-pane {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
.depth div.top-pane {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
.depth div.bottom-pane {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
.depth div.front-pane {
  transform: translateZ(100px);
}

我怎样才能纠正观点，让他们做出正确的行为？我不明白它们应该在 2d 空间中的确切位置来创建 3d 幻觉，或者什么样的旋转和透视组合会创建 3d 幻觉。

Answer 1

从一个面开始构建立方体，并从与底座相同的位置开始构建其他面，但旋转或平移它们。

立方体然后可以只在二维空间中布局，使用 flex 或任何最适合你的东西

只需为容器设置您喜欢的方向即可。

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

div {
    transform-style: preserve-3d;
    transition: transform 5s;
}

.container:hover .cubebase div {
    transform: rotate(0deg);
}
.container:hover .cubebase .cover {
    transform: transformZ(0px);
}


.cubebase {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: rgba(255,0,0, 0.1);
    box-shadow: inset 0px 0px 5px red;
}
.cubebase:nth-child(2) {
    background-color: rgba(0,255,0, 0.2);
    box-shadow: inset 0px 0px 5px green;
}
.cubebase:nth-child(3) {
    background-color: rgba(0,0,255, 0.2);
    box-shadow: inset 0px 0px 5px blue;
}
.cubebase:nth-child(4) {
    background-color: rgba(200,200,0, 0.3);
    box-shadow: inset 0px 0px 5px brown;
}

.cubebase div {
   width: 100px;
   height: 100px;
   position: absolute;
   background-color: inherit;
   box-shadow: inherit;
   top: 0px;
   left: 0px;
}

div.rface {
    transform: rotateY(90deg);
    transform-origin: right;
}

.lface {
    transform: rotateY(-90deg);
    transform-origin: left;
}

.tface {
    transform: rotateX(90deg);
    transform-origin: top;
}
.bface {
    transform: rotateX(-90deg);
    transform-origin: bottom;
}

.cover {
    transform: translateZ(100px);
}


.container {
    border: solid 1px silver;
    transform: rotateY(20deg) rotateX(190deg);
    perspective: 5000px;
    top: 50px;
    left: 50px;
    position: relative;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}

<div class="container">
    <div class="cubebase">
        <div class="rface"></div>
        <div class="lface"></div>
        <div class="tface"></div>
        <div class="bface"></div>
        <div class="cover"></div>
    </div>
    <div class="cubebase">
        <div class="rface"></div>
        <div class="lface"></div>
        <div class="tface"></div>
        <div class="bface"></div>
        <div class="cover"></div>
    </div>
    <div class="cubebase">
        <div class="rface"></div>
        <div class="lface"></div>
        <div class="tface"></div>
        <div class="bface"></div>
        <div class="cover"></div>
    </div>
    <div class="cubebase">
        <div class="rface"></div>
        <div class="lface"></div>
        <div class="tface"></div>
        <div class="bface"></div>
        <div class="cover"></div>
    </div>
</div>