.flip-container {
    perspective: 150px;
}

.flip-container .flipper {
    animation: flip 2s infinite ease;
}

.flip-container, .front, .back {
    height: 70px;
    width: 70px;
}

.flip-container .flipper {
    transform-style: preserve-3d;
    position: relative;
}

.flip-container .front,
.flip-container .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.flip-container .front {}

.flip-container .back {
    transform: rotateY(180deg);
}

.flip-container .flipper:before {
    position: absolute;
    height: 300px;
    width: 300px;
}

@keyframes flip {
    from { transform: rotateY(0deg);   }
    50%  { transform: rotateY(180deg); }
    to   { transform: rotateY(360deg); }
}