html - 制作一个立方体填满整个屏幕

Question

我想要实现的是像这个网页上的页面转换 - http://ejosue.com/ .

到目前为止，我所做的是创建一个具有悬停效果的立方体，其工作方式与在网站上非常相似。但是，现在我在让立方体填满整个屏幕时遇到了问题(就像在引用的网页上一样)。

这是 JSfiddle - https://jsfiddle.net/definaly/31zr05y7/48/

以及本页的代码

body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 200px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.cube:hover{
  animation: pageDown 1.5s linear forwards;
}

@keyframes pageDown{
  25%{
    transform: scale(0.8);
  }
  75%{
    transform: rotateX(90deg);
  }
  100%{
    transform: scale(1);
    transform: rotateX(90deg);
  }
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  
  /* Optional Styling */
  line-height: 200px;
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front  {
  background: hsla(  0, 100%, 50%, 1);
}

.cube__face--bottom {
  background: hsla(300, 100%, 50%, 1);
}



.cube__face--front  {
  transform: rotateY(0deg) translateZ(100px);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(100px);
  }

<div class="scene">

  <div class="cube">
    <div class="cube__face cube__face--front">entry page</div>
    <div class="cube__face cube__face--bottom">extra page</div>
  </div>
  
</div>

Answer 1

只需将场景元素设为 100vh 并在翻译中考虑 50vh。同时删除宽度以具有默认的全宽:

body { font-family: sans-serif;margin:0; } /* Remove the default margin */

* {
  box-sizing:border-box; /* to make sure there is no overflow*/
}

.scene {
  height: 100vh;
}

.cube {
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.cube:hover{
  animation: pageDown 1.5s linear forwards;
}

@keyframes pageDown{
  25%{
    transform: scale(0.8);
  }
  75%{
    transform: rotateX(90deg);
  }
  100%{
    transform: scale(1);
    transform: rotateX(90deg);
  }
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  
  /* Optional Styling */
  line-height: 200px;
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front  {
  background: hsla(  0, 100%, 50%, 1);
}

.cube__face--bottom {
  background: hsla(300, 100%, 50%, 1);
}



.cube__face--front  {
  transform: rotateY(0deg) translateZ(50vh);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(50vh);
  }

<div class="scene">

  <div class="cube">
    <div class="cube__face cube__face--front">entry page</div>
    <div class="cube__face cube__face--bottom">extra page</div>
  </div>
  
</div>