SOURCE

<div class="cube">
    <div class="plane plane1"></div>
    <div class=" plane plane2"></div>
    <div class="plane plane3"></div>
    <div class="plane plane4"></div>
    <div class="plane plane5"></div>
    <div class="plane plane6"></div>
</div>

.cube {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    position: relative;
    margin: 200px 200px;
    transform-style: preserve-3d;
    transform: rotate3d(); 
}

.plane {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    right: 0;
    background-color: green;
    opacity: 0.5;
}
.plane4 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: blue;  
}

.plane1 {
    transform: translateZ(-100px);
    background-color: red;  
}
.plane2 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: yellow;  
}

.plane3 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: orign;  
}

.plane5 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: yellow;  
}

.plane6 {
    transform: rotateY(-90deg) translateZ(-100px);
    background-color: yellow;  
}

.hover {
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: orchid;
}

.hover:hover {
    
}