CSS Grid of Hexagons - changing the hover animatio

问题:

So I found a resource for a responsive grid of hexagons with images. Does anyone know how to change the hover animations in the same coding? I'm trying to change it to a simple horizontal tile flip hover animation without changing the existing code as much as possible, Thanks!

My repository : https://github.com/MargauxShraiman/bellashraiman/ Original website : https://github.com/web-tiki/responsive-grid-of-hexagons the animation I'd like to imitate: https://davidwalsh.name/demo/css-flip.php

    /*** HOVER EFFECT ************************************************/
    .hexLink:hover h1, .hexLink:focus h1,
    .hexLink:hover p, .hexLink:focus p{
        -webkit-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }

回答1:

If you apply this :

li.hex {
   transform: rotateY(180deg);
   transition: transform .2s ease-out;
}

each hexagon should rotate by 180° on hover.