html - 响应式 3d 立方体 - 底部在 y 轴上移动并调整视口(viewport)大小

Question

我正在尝试制作一个响应式直 Angular 棱镜，其深度将随窗口调整大小。但是，无论我做什么，我都无法让底层正常工作。当视口(viewport)具有方形纵横比时，它仅在 Z 轴上对齐。
当我将它设置为 translateY(-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 属性(参见 transform-origin on 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>