* {
 margin: 0px;
 padding: 0px;
}

html, body {
 width: 100%;
 height: 100%;
}

.cube {
 width: 100px;
 height: 100px;
 position: relative;
 transform-style: preserve-3d;
 transform: rotateX(-20deg) rotateY(-45deg);
 top: 50%;
 left: 50%;
 margin-left: -100px;
 margin-top: -100px;
}

.cube div {
 width: 100px;
 height: 100px;
 position: absolute;
 background: orange;
 border: 2px solid black;
 box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.6);
 border-radius: 5px;
}
    
.background_area {
 width: 300px;
 height: 300px;
 position: absolute;
 background: grey;
}

.cube div.top_side {
 transform: rotateX(90deg);
 margin-top: -50px;
 background-size: 100px 100px;
}

.cube div.right_side {
 transform: rotateY(90deg); 
 margin-left: 50px;
 background-size: 100px 100px;
}

.cube div.bottom_side {
 transform: rotateX(90deg);
 margin-top: 50px;
 background-size: 100px 100px;
}

.cube div.left_side {
 transform: rotateY(-90deg);
 margin-left: -50px;
 background-size: 100px 100px;
}

.cube div.front_side {
 transform: translateZ(50px); 
 background-size: 100px 100px;
}

.cube div.back_side {
 transform: translateZ(-50px); 
}