.scene {
    width: 100%;
    height: 357px;
    perspective: 600px;
    cursor: pointer;
    border-radius: 10px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
}


.card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
}


.card__face--front {
    background: red;
}

.card__face--back {
    background: blue;
    transform: rotateY(180deg);
}


.card.is-flipped {
    transform: rotateY(180deg);
}