Question

我试图将CSS 3D多维数据集彼此堆叠（我的最终目标是构建一个Rubik多维数据集）。我从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>

为所有cubeContainer添加transform-style: preserve-3d。多维数据集容器也被旋转，因为其父级被旋转，并且没有此属性，它们将使用html元素排序并在x轴上旋转后重叠。

将CSS 3d多维数据集彼此堆叠时出现问题

1 个答案: