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>

使立方体填满整个屏幕

1 个答案: