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)
})