CSS zum Erzielen des Effekts einer rotierenden Flip-Card-Animation

<Stil>
        .Kasten {
            Höhe: 300px;
            Breite: 300px;
            Position: relativ;
        }
        
        .zh,
        .Lüfter {
            Höhe: 300px;
            Breite: 300px;
            Zeilenhöhe: 300px;
            Schriftgröße: 30px;
            Textausrichtung: zentriert;
            Farbe: blau;
            Übergang: alles 2er;
            Rückseitensichtbarkeit: versteckt;
            /* Rückseite ist nicht sichtbar */
            Position: absolut;
            oben: 0;
            links: 0;
        }
        
        .zh {
            Hintergrundfarbe: Aqua;
        }
        
        .Lüfter {
            Hintergrundfarbe: Aquamarin;
            transformieren: Y-Drehung (-180 Grad) Z-Drehung (-180 Grad);
        }
        
        .box:hover .zh {
            Transformieren: Y-Drehung (180 Grad) Z-Drehung (180 Grad)
        }
        
        .box:hover .fan {
            transformieren: drehenY(0) drehenZ(0);
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Box">
        <div class="zh">Vorderseite</div>
        <div class="fan">Zurück</div>

    </div>
</body>