Live Code::DevDic

.cube-wrapper {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: perspective(700px) rotateX(-30deg) rotateY(45deg);
    position: relative;
    left: calc(50vw - 50px);
    top: calc(50vh - 50px);
    transition: 0.3s;
}
.cube-wrapper:hover {
    transform: perspective(700px) rotateX(-30deg) rotateY(45deg) translateZ(-40px);
}
.cube-wrapper > div {
	position: absolute;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
   	font-weight: bold;
    font-size: 20px;
}
.cube-front {
	background-color: #FF0000;
    transform: translate3d(0, 0, 50px);
}
.cube-back {
    background-color: #0000FF;
    transform: rotateY(180deg) translate3d(0, 0, 50px);
}
.cube-top {
 	background-color: #FFFF00;
    transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.cube-bottom {
 	background-color: #de0081;
    transform: rotateX(-90deg) translate3d(0, 0, 50px);
}
.cube-left {
    background-color: #00FF00;
    transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.cube-right {
    background-color: #f77c1c;
    transform: rotateY(90deg) translate3d(0, 0, 50px);
}

Console