响应式 3D 立方体 - 底部在 y 轴上移动，视口调整大小

Question

我正在尝试制作一个具有深度的响应式矩形棱镜，该棱镜将随窗口调整大小。 但是，无论我做什么，我都无法让底部正常工作。 仅当视口具有方形纵横比时，它才会在 Z 轴上对齐。
当我将其设置为翻译Y(-50vh(时，我遇到了顶部移动的相同问题，但是当我将其更改为-50vw时，它开始按照我想要的方式运行(由于某种原因我无法弄清楚(。

如何使底部像顶部一样响应？

https://codepen.io/anon/pen/jwBQGR

.scene {
  width: 100vw;
  height: 100vh;
  margin: 0 auto 0;
  perspective: 3000px;
}
.rectangle {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-50vw);
}
.side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
}
.back {
  transform: translateZ(-50vw);
  background-color: saddlebrown;
}
.top {
  background-color: lightblue;
  height: 100vw;
  transform: translateY(-50vw) rotateX(-90deg);
}
.bottom {
  background-color: green;
  height: 100vw;
  transform: translateY(50vh) rotateX(90deg);
}
.front {
  opacity: 0;
  pointer-events: none;
}
.left {
  background-color: sandybrown;
  transform: translateX(-50vw) rotateY(-90deg);
}
.right {
  background-color: brown;
  transform: translateX(50vw) rotateY(90deg);
}

<div class="scene">
  <div class="rectangle" id="cubeID">
    <div class="side back">
      <h1>Back</h1>
    </div>
    <div class="side top">
      <h1>Top </h1>
    </div>
    <div class="side bottom">
      <h1>Bottom</h1>
    </div>
    <div class="side front">
      <h1>Front</h1>
    </div>
    <div class="side left">
      <h1>Left</h1>
    </div>
    <div class="side right">
      <h1>Right</h1>
    </div>
  </div>
</div>

Answer 1

关键是使用 transform-origin 属性(请参阅 MDN 上的转换源(。这样，您可以控制每条边的旋转轴，而不是像您那样在旋转它们后通过平移重新定位它们。

这是一个例子：

body,html{margin:0;}
.scene {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  perspective: 3000px;
}
.rectangle {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
}
.back {
  transform: translateZ(-100vw);
  background-color: saddlebrown;
}
.top {
  background-color: lightblue;
  height:100vw;
  transform-origin:50% 0;
  transform: rotateX(-90deg);
}
.bottom {
  background-color: green;
  height:100vw;
  bottom:0;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
.front {
  opacity: 0;
  pointer-events: none;
}
.left {
  background-color: sandybrown;
  transform-origin:0 50%;
  transform: rotateY(90deg);
}
.right {
  background-color: brown;
  transform-origin:100% 50%;
  transform: rotateY(-90deg);
}

<div class="scene">
  <div class="rectangle" id="cubeID">
    <div class="side back"><h1>Back</h1></div>
    <div class="side top"><h1>Top </h1></div>
    <div class="side bottom"><h1>Bottom</h1></div>
    <div class="side front"><h1>Front</h1></div>
    <div class="side left"><h1>Left</h1></div>
    <div class="side right"><h1>Right</h1></div>
  </div>
</div>