.flip-box{
    width:100%;
    height:350px;
    background:transparent;
    perspective:1000px;
}

.flip-box-inner{
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    transition:transform .8s;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}

.flip-box:hover .flip-box-inner{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
	transform-style: preserve-3d
	transition: transform .8s
}

.flip-box-front,
.flip-box-back{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius:12px;
    overflow:hidden;
}

.flip-box-front{
    background:#fff;
    transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
}

.flip-box-back{
    background:#010812;
    color:#fff;
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    display:flex;
    align-items:center;
    justify-content:center;
}
.flip-box img{
    transform:translateZ(0);
}