HTML

<div class="list-cubes">
    <div class="container-cube">
        <div class="cube cube_model">
            <div class="side side_front"></div>
            <div class="side side_right"></div>
            <div class="side side_top"></div>
            <div class="side side_left"></div>
            <div class="side side_bottom"></div>
            <div class="side side_back"></div>
        </div>
    </div>

    <div class="container-cube">
        <div class="cube cube_click">
            <div class="side side_front side_click"></div>
            <div class="side side_right side_click"></div>
        </div>
    </div>
</div>

CSS

.list-cubes {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.container-cube {
    perspective: 800px;
}

.cube {
    width: 300px;
    height: 300px;

    transition: 1s;

    transform-style: preserve-3d;
    position: relative;
    transform: translateZ(-150px);
}

.cube_model {
    transform: translateZ(-150px) rotateX(-15deg) rotateY(45deg);
}

.side {
    position: absolute;

    width: 100%;
    height: 100%;

    opacity: 0.5;
}

.cube_model .side {
    border: dotted black 10px;
}

.side_front {
    background-color: red;

    transform: translateZ(150px);
}

.side_right {
    background-color: orange;
    transform: rotateY(90deg) translateZ(150px);
}

.side_top {
    background-color: yellow;
    transform: rotateX(90deg) translateZ(150px);
}

.side_left {
    background-color: green;
    transform: rotateY(-90deg) translateZ(150px);
}

.side_bottom {
    background-color: blue;
    transform: rotateX(-90deg) translateZ(150px);
}

.side_back {
    background-color: darkmagenta;
    transform: rotateY(180deg) translateZ(150px);
}

.cube_turned {
    transform: rotateY(-90deg) translateX(-150px);
}

JS

CLS_CUBE_TURNED = "cube_turned"

let cube = document.querySelector(".cube_click")

function slideCube() {
    cube.classList.toggle(CLS_CUBE_TURNED)
}

sides_click = document.querySelectorAll(".side_click")
sides_click.forEach(side => {
    side.addEventListener("click", slideCube)
})