.flip-box-wrapper {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
 
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: transform 0.8s;
    transition: transform 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-wrapper:hover .flip-box-inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 
.flip-box-front, .flip-box-back {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
	position: relative;
}

.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}