Проблема укладки CSS-кубов 3D друг на друга

Question

Я пытаюсь накапливать CSS-кубы 3D друг над другом (моя конечная цель - построить кубик Рубика). Я начал с 3 кубов, размещенных так: rotateX (0deg)

Но вот что происходит, когда я поворачиваю его на 45 градусов: rotateX (45deg)

Это код:

* {
  box-sizing: border-box;
}

 :root {
  --cubeSize: 100px;
  --translateSize: 50px;
  --negTranslateSize: -50px;
}

.RCContainer {
  height: 300px;
  width: 100px;
  perspective: 600px;
}

.RC {
  position: relative;
  left: 450px;
  top: 200px;
  height: 300px;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
}

.cubeContainer1,
.cubeContainer2,
.cubeContainer3 {
  height: var(--cubeSize);
  width: var(--cubeSize);
  position: relative;
}

.cubeContainer1 {
  position: absolute;
  top: 200px;
}

.cubeContainer2 {
  position: absolute;
  top: 100px;
}

.cubeContainer3 {
  position: absolute;
}

.cube {
  position: relative;
  height: var(--cubeSize);
  width: var(--cubeSize);
  transform-style: preserve-3d;
  transform: translateZ(var(--negTranslateSize)) rotateX(0deg);
}

.square {
  position: absolute;
  height: var(--cubeSize);
  width: var(--cubeSize);
  border: 3px solid black;
}

.front {
  transform: translateZ(var(--translateSize));
}

.back {
  transform: rotateX(180deg) translateZ(var(--translateSize));
}

.top {
  transform: rotateX(90deg) translateZ(var(--translateSize));
}

.bottom {
  transform: rotateX(-90deg) translateZ(var(--translateSize));
}

.left {
  transform: rotateY(-90deg) translateZ(var(--translateSize));
}

.right {
  transform: rotateY(90deg) translateZ(var(--translateSize));
}

<div class="RCContainer">
  <div class="RC">
    <div class="cubeContainer1">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top black"></div>
        <div class="square bottom red"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
    <div class="cubeContainer2">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top black"></div>
        <div class="square bottom black"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
    <div class="cubeContainer3">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top orange"></div>
        <div class="square bottom black"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
  </div>
</div>

До того, как я использовал абсолютное положение в контейнерах кубов, я также попытался немного поиграть с z-index в каждом из контейнеров кубов, но это не устранило проблему.

Как я могу это исправить?

Answer 1

* {
  box-sizing: border-box;
}

 :root {
  --cubeSize: 100px;
  --translateSize: 50px;
  --negTranslateSize: -50px;
}

.RCContainer {
  height: 300px;
  width: 100px;
  perspective: 600px;
}

.RC {
  position: relative;
  left: 450px;
  top: 200px;
  height: 300px;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotatex(30deg);
}

.cubeContainer1,
.cubeContainer2,
.cubeContainer3 {
  height: var(--cubeSize);
  width: var(--cubeSize);
  position: relative;
  transform-style: preserve-3d;
 }

.cubeContainer1 {
  position: absolute;
  top: 200px;
}

.cubeContainer2 {
  position: absolute;
  top: 100px;
}

.cubeContainer3 {
  position: absolute;
}

.cube {
  position: relative;
  height: var(--cubeSize);
  width: var(--cubeSize);
  transform-style: preserve-3d;
  transform: translateZ(var(--negTranslateSize)) rotateX(0deg);

}

.square {
  position: absolute;
  height: var(--cubeSize);
  width: var(--cubeSize);
  border: 3px solid black;
  transform-style: preserve-3d;
}

.front {
  transform: translateZ(var(--translateSize));
  background: red;
}

.back {
  transform: rotateX(180deg) translateZ(var(--translateSize));
   background: green;
}

.top {
  transform: rotateX(90deg) translateZ(var(--translateSize));
     background: yellow;

}



.left {
  transform: rotateY(-90deg) translateZ(var(--translateSize));
  background: blue;
}

.right {
  transform: rotateY(90deg) translateZ(var(--translateSize));
   background: cyan;
}

.bottom {
  transform: rotateX(-90deg) translateZ(var(--translateSize));
   background: pink;
}

<div class="RCContainer">
  <div class="RC">
    <div class="cubeContainer1">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top black"></div>
        <div class="square bottom red"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
    <div class="cubeContainer2">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top black"></div>
        <div class="square bottom black"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
    <div class="cubeContainer3">
      <div class="cube">
        <div class="square front blue"></div>
        <div class="square back black"></div>
        <div class="square top orange"></div>
        <div class="square bottom black"></div>
        <div class="square left white"></div>
        <div class="square right black"></div>
      </div>
    </div>
  </div>
</div>

Добавить transform-style: preserve-3d для всех кубических контейнеров. Контейнеры куба также вращаются, потому что его родительский элемент поворачивается, и без этого свойства они используют упорядочивание html-элементов и перекрытия после поворота по оси x.