:root {
    --cube-width: 300px;
    --translateZ: 150px
}

.container {
    max-width: 800px;
}

.cube-container {
    perspective: 1000px;
}

.cube-container .cube {
    width: var(--cube-width);
    height: var(--cube-width);
    transform-style: preserve-3d;
}

.cube-container .cube-face {
    width: var(--cube-width);
    height: var(--cube-width);
    font-size: 30px;
    background-color: yellow;
    color: black;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.cube-container .front {
    transform: translateZ(var(--translateZ));
    background-color: red;
}

.cube-container .back {
    background-color: pink;
    transform: rotateY(180deg) translateZ(var(--translateZ));
}

.cube-container .left {
    background-color: green;
    transform: rotateY(-90deg) translateZ(var(--translateZ));
}

.cube-container .right {
    background-color: blue;
    transform: rotateY(90deg) translateZ(var(--translateZ));
}

.cube-container .top {
    background-color: violet;
    transform: rotateX(90deg) translateZ(var(--translateZ));
}

.cube-container .bottom {
    background-color: white;
    transform: rotateX(-90deg) translateZ(var(--translateZ));
}