Help

by Nisemup

HTML

<div class="flip_ppc" ontouchstart="this.classList.toggle('hover');">
                <div class="flip">
                    <div class="don_pp">
                         <h1>1</h1>
                    </div>
                    <div class="don_ppb">
                        <h1>2</h1>
                    </div>
                </div>   
            </div>

CSS

.flip_ppc { /* контейнер */
    perspective: 1000;
}

.flip_ppc:hover .flip, .flip_ppc.hover .flip {  /* анимация */
    animation: fl 1.2s linear 1 alternate 0s forwards; 
}

.flip_ppc, .don_pp, .don_ppb { /* блок */
    width: 320px;
    height: 480px;
    border-radius: 10px;
    margin-bottom: 50px;
}

.flip {
    transition: 1.2s;
    transform-style: preserve-3d;
    position: relative;
}

.don_pp, .don_ppb {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.don_pp { /* передняя сторона */
    z-index: 2;
    background: #e9e9e9;
    box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 10px 10px rgba(0,0,0,0.24);
}

.don_ppb { /* задняя сторона */
    transform: rotateY(180deg);
    background: #e9e9e9;
    box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 10px 10px rgba(0,0,0,0.24);
}


/* Anim */

@keyframes fl {
    0% {
        transform: scale(1) rotateY(0deg);
    }
    50% {
        transform: scale(1.1) rotateY(90deg);
    }
    100% {
        transform: scale(1) rotateY(180deg);
    }
}