@-webkit-keyframes flipOutYtest {
    from {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
    }
    40% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
        opacity: 1;
    }
    50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
    to {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
        opacity: 0;
    }
}

.test {
    -webkit-animation: flipOutYtest 0.75s linear;
    animation: flipOutYtest 0.75s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

@-webkit-keyframes flipInYtest {
    from {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
        opacity: 0;
    }
    50% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(1400px);
        transform: perspective(1400px);
        opacity: 1;
    }
}

.test2 {
    -webkit-animation: flipInYtest 0.75s linear;
    animation: flipInYtest 0.75s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.well-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.correct {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/bg2.png)no-repeat center;
    background-size: 100% 100%;
}

.opposite {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.opposite>div {
    width: 100%;
    height: 100%;
}

.opposite a {
    width: 100%;
    height: 100%;
}