body {
margin: 0px;
}
* {
box-sizing: border-box;
}
.background {
background: #2C2C2C;
display: flex;
height: 100vh;
}
.gallery {
margin: auto;
display: flex;
justify-content: space-between;
gap: 16px;
perspective: 800px;
}
.card {
position: relative;
width: 120px;
height: 160px;
cursor: pointer;
transition: 1s ease-in-out;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(0.5turn);
}
.card__side {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
width: 100%;
height: 100%;
transition: 1s ease-in-out;
}
.card__side--back {
transform: rotateY(0.5turn);
}
.card__side > img {
width: 120px;
height: 160px;
object-fit: cover;
}