CSS
html, body {
background-color: #333;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cube,
.cube:before,
.cube:after {
display: block;
width: 100px;
height: 100px;
background-color: #e74c3c;
transform-style: preserve-3d;
transform: translateZ(0) rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}
.cube:before,
.cube:after {
content: "";
background-color: #c0392b;
transform: translateX(50px) translateZ(-50px) rotateY(90deg);
}
.cube:after {
background-color: #ba2d1e;
transform: translateY(-50px) translateZ(-50px) rotateX(90deg);
}
