.card {
    position: relative;
}

.card__front,
.card__back {
    position: absolute;
}

.card__front,
.card__back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -webkit-transform 0.7s;
    -ms-transition: -webkit-transform 0.7s;
    -o-transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.card__back {
    background-color: #1e1e1e;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
}

.card.flipped .card__front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
}

.card.flipped .card__back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
}