Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src='https://code.jquery.com/jquery-1.9.1.js'></script>
<style>
* { box-sizing: border-box; margin: 0px; }
.scene {
width: 100%;
height: 100vh;
perspective: 1000px;
}
.cube {
width: 100%;
height: 100vh;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-50vh);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-50vh) rotateY( 0deg); }
.cube.show-bottom { transform: translateZ(-50vh) rotateX( 90deg); }
.cube__face {
position: absolute;
width: 100%;
height: 100vh;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 0.7);
transform: rotateY( 0deg) translateZ(50vh);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(50vh);
}
#ajax-loading-screen {
background-color: transparent;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 1000000000;
}
#ajax-loading-screen .mask-top {
top: 0;
left: 0;
height: 50%;
width: 100%;
}
#ajax-loading-screen .mask-right {
top: 0;
right: 0;
height: 100%;
width: 50%;
}
#ajax-loading-screen .mask-bottom {
bottom: 0;
right: 0;
height: 50%;
width: 100%;
}
#ajax-loading-screen .mask-left {
top: 0;
left: 0;
height: 100%;
width: 50%;
}
#ajax-loading-screen[data-effect="center_mask_reveal"] span {
position: absolute;
background: #fff;
z-index: 100;
-webkit-transition: 0.8s cubic-bezier(0.12,0.75,0.4,1);
transition: 0.8s cubic-bezier(0.12,0.75,0.4,1);
}
#ajax-loading-screen.loaded .mask-top {
-webkit-transform: translateY(-100%) translateZ(0);
-ms-transform: translateY(-100%) translateZ(0);
transform: translateY(-100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-right {
-webkit-transform: translateX(100%) translateZ(0);
-ms-transform: translateX(100%) translateZ(0);
transform: translateX(100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-bottom {
-webkit-transform: translateY(100%) translateZ(0);
-ms-transform: translateY(100%) translateZ(0);
transform: translateY(100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-left {
-webkit-transform: translateX(-100%) translateZ(0);
-ms-transform: translateX(-100%) translateZ(0);
transform: translateX(-100%) translateZ(0);
}
</style>
</head>
<body>
<div id="ajax-loading-screen" data-effect="center_mask_reveal">
<span class="mask-top"></span>
<span class="mask-right"></span>
<span class="mask-bottom"></span>
<span class="mask-left"></span>
</div>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">ORIEL</div>
<div class="cube__face cube__face--bottom">INDIFFERENCE</div>
</div>
</div>
<script>
var currentClass = '';
var cube = document.querySelector('.cube');
var showClass = '';
window.addEventListener('wheel', function(event) {
if ( currentClass ) {
cube.classList.remove( currentClass );
}
if (event.deltaY < 0) {
showClass = 'show-front';
}
else if (event.deltaY > 0) {
showClass = 'show-bottom';
}
cube.classList.add( showClass );
currentClass = showClass;
});
$(function() {
$("#ajax-loading-screen").addClass("loaded");
setTimeout(function() {
$("#ajax-loading-screen").hide();
}, 800);
});
</script>
</body>
</html>
Result:
Ref.
https://codepen.io/desandro/pen/KRWjzm