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

【问题标题】：Responsive 3d cube - bottom moving on y axis with viewport resize响应式 3d 立方体 - 底部在 y 轴上移动，视口调整大小
【发布时间】：2017-06-20 14:37:57
【问题描述】：

我正在尝试制作一个响应式矩形棱镜，其深度将随窗口调整大小。但是，无论我做什么，我都无法让底部正常工作。只有当视口具有正方形纵横比时，它才会在 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>

【问题讨论】：

.scene { 宽度：100vw;高度：100vh；边距：0 自动 0；视角：3000px；背景：绿色；试试这个，快速破解。

标签： html css 3d css-transforms

【解决方案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>

【讨论】：