body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222;
}

.card {
    height: 340px;
    width: 250px;
    position: relative;
    transition: all 1s linear;
    transform-style: preserve-3d;
}

.front,
.back {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-family: 'Lobster', cursive;
    border-radius: 10px;
    position: absolute;
}

.front {
    background: linear-gradient(#08aeea, #2af598);
    z-index: 2;
    backface-visibility: hidden;
}

.back {
    background: linear-gradient(#f8da61, #ff5acd);
    z-index: 1;
    transform: rotateY(180deg);
}

.container:hover .card {
    transform: rotateY(180deg);
}

.container {
    perspective: 1000px;
}