Making a cube fill entire screen - html

Question

What I'm trying to achieve is the transition of the page like on this webpage - http://ejosue.com/.
So far what I have done is created a cube with an on hover effect which works pretty much like on the website. Now however I have a problem with making the cube fill the entire screen (like on the referenced webpage).
Here's the JSfiddle - https://jsfiddle.net/definaly/31zr05y7/48/
And the code on this page
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

Simply make the scene element 100vh and consider 50vh inside the translation. Also remove the width to have the default full width:
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>