Расслоение групп 3D объектов в CSS

Question

Я пытаюсь создать мини-3D-игру, используя только реакции и CSS.Вы нажимаете на отдельные кубики, и они исчезают.Полный код в скрипке.https://jsfiddle.net/mccue/noqz5ewa/5/

Это куб из кубиков, и я дошел до построения первой плоскости куба, которая имеет размер 3x3.

Как добавить другие плоскости кубов в текущую плоскость, чтобы она выглядела как один твердый трехмерный объект (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;
    }
  }
}