响应的3d立方体 - 底部移动y轴与视口调整大小

Question

我试图制作一个响应式矩形棱镜，其深度使用窗口调整。但是，无论我做什么，我都无法让底线正常工作。当视口具有方形纵横比时，它仅在Z轴上排列 当我将它设置为translateY（-50vh）时，我遇到了与顶端移动相同的问题，但是当我将其更改为-50vw时，它开始表现我的想法（出于某种原因，我无法弄清楚）。

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

重点是使用transform-origin属性（请参阅transform-origin on MDN）。这样，您可以控制每一侧的旋转轴，而不是像它一样旋转后重新定位它们。

以下是一个例子：

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;