在CSS中对3D对象组进行分层

Question

我正在尝试仅使用react和css构建一个微型3D游戏。您单击单个多维数据集，它们消失。完整的代码在摆弄。 https://jsfiddle.net/mccue/noqz5ewa/5/

这是一个多维数据集的多维数据集，到目前为止，我已经建立了多维数据集的第一个平面3x3。

如何将多维数据集的其他平面添加到当前平面，使其看起来像一个实体3D对象（3x3x3）？我尝试将3x3多维数据集的层相互堆叠，但是当前单独div中的任何其他多维数据集都只是添加到现有平面的底部。

我的计划是缩放，以便我可以制作大小不同的多维数据集（例如100x100x100）

任何想法都将受到欢迎，因为这是我第一次深入3d。谢谢！

多维数据集js代码段：

  render() {
    var {
        x,
        y,
        z,
        zoom,
        zoomRange,
        opacity,
        perspective,
        displayPanel
      } = this.state,
      cubeStyle = {
        transform: `translateZ(${zoom}px) rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`
      },
      containerStyle = { perspective: `${1000}px` },
      surfaceStyle = { opacity: opacity / 100 };

    return (
      <div className="background" style={containerStyle}>
        <div className="cubeWrapper" style={cubeStyle}>
          <div className="wrapper">
            {Array(3)
              .fill()
              .map((e, i1) => (
                <div key={i1} className="row">
                  {Array(3)
                    .fill()
                    .map((e, i2) => {
                      return (
                        <div key={i2} className="container">
                          <div
                            key={i2}
                            className={
                              this.state.data[[i1, i2]].visible
                                ? "cubeFront"
                                : "cubeFront hidden"
                            }
                            onClick={e => {
                              this.handleClick({ i1, i2 });
                            }}
                          >
                            {Array(6)
                              .fill()
                              .map((e, i3) => {
                                return (
                                  <figure
                                    key={i3}
                                    style={surfaceStyle}
                                    onClick={() => {}}
                                  />
                                );
                              })}
                          </div>
                        </div>
                      );
                    })}
                </div>
              ))}
          </div>
        </div>
      </div>
    );
  }

多维数据集css片段：

$elements: 100;

.container {
  position: absolute;
  transition: perspective 300ms ease;
  transform-style: preserve-3d;
  @for $i from 0 to $elements {
    $x: (100 * (($i)));

    &:nth-child(#{$i + 1}) {
      left: #{$x}px;
    }
  }
}

.cubeFront {
  height: 100%;
  width: 100%;
  transition: transform 300ms ease;
  transform-style: preserve-3d;
  transform-origin: 0px 0px 0px;
  padding: 10px;
  &.animated {
    transition-duration: 100ms;
    // animation: animateCube 10s linear infinite;
  }
  &.hidden {
    display: none;
  }

  figure {
    position: absolute;
    height: 100px;
    width: 100px;
    background: #fff;
    transition: opacity 300ms;
    &:nth-of-type(1) {
      background: #db5461;
      transform: translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
    &:nth-of-type(2) {
      background: #db5461;
      transform: rotateX(180deg) translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
    &:nth-of-type(3) {
      background: #593c8f;
      transform: rotateY(-90deg) translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
    &:nth-of-type(4) {
      background: #593c8f;
      transform: rotateY(90deg) translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
    &:nth-of-type(5) {
      background: #8ef9f3;
      transform: rotateX(90deg) translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
    &:nth-of-type(6) {
      background: #8ef9f3;
      transform: rotateX(-90deg) translateZ(50px);
      border-width: 1px;
      border-color: white;
      border-style: solid;
    }
  }
}