card flip 2

game-card.component.scss

:host {
    display: block;
    perspective: 600px;
}

.card {
    box-shadow: 10px 10px 43px -18px rgba(0, 0, 0, 0.75);
    border-radius: 5px;
    height: 300px;
    width: 200px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
}

.face {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    backface-visibility: hidden;
    > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }
}

.front {
    transform: rotateY(180deg);
}