yeet.marigold.town/css/counter.css

.wrapper {
    width: 800px;
    height: 300px;
    display: block;
    margin: none;
}

.counter {
    width: 100%;
    height: 100%;
    display: block;
    perspective: 1200px; /* determines size of the overall element in the final transform */
    backface-visibility: visible;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    transform: translateZ(-100px) rotateX(-30deg);
}

.face {
    width: 800px;
    height: 300px;
    display: block;
    position: absolute;
}

.vert-side {
    width: 200px;
    height: 300px;
    display: block;
    position: absolute;
    left: 300px;
}

.horiz-side {
    width: 800px;
    height: 200px;
    display: block;
    position: absolute;
    top: 50px;
}

.top-shelf {
    background-color: #666666;
    transform: rotateX(90deg) translateZ(150px);
}

.bottom-shelf {
    background-color: #666666;
    transform: rotateX(-90deg) translateZ(150px);
}

.right-shelf {
    background-color: #333333;
    transform: rotateY(90deg) translateZ(400px);
    right: 0;
}

.left-shelf {
    background-color: #333333;
    transform: rotateY(-90deg) translateZ(400px);
}

.front-shelf {
    background: rgba(255,255,255,0.3);
    transform: translateZ(100px);
}

.back-shelf {
    background: rgba(255,255,255,0.8);
    transform: rotateY(180deg) translateZ(100px);
}