demo-container { display: block; border: 2px solid rgb(189, 189, 189); padding: 25px 10px 10px; border-radius: 4px; width: fit-content; }
demo-object { display: block; background-color: rgb(224, 255, 253);
margin: 50px;
width: 100px;
height: 100px;
transform: rotate3d(1, 1, 1, 30deg);
}

block-block {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}

.element {transform-style: preserve-3d;}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}

.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}

.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}

.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}

.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}

.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}