CSS animation for tile flipping

flipper.less

.flip-container { 
        perspective: 1000;
        .flipper { 
                transition: 0.6s; /* all .4s ease-in-out */
                transform-style: preserve-3d; 
                position: relative;
        }
        .front, .back { 
                backface-visibility: hidden; 
                position: absolute; 
                top: 0; 
                left: 0; 
        }
        .front { z-index: 2; }
        .back { transform: rotateY(180deg); }
        &:hover .flipper, &.hover .flipper { 
                transform: rotateY(180deg); 
        }
}