Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS

<Text>
    <div Klasse="Box">
        <div Klasse="Gesicht vorne">
            <h2>Vorderseite</h2>
        </div>
        <div Klasse="Gesicht nach hinten">
            <h2>Zurück</h2>
        </div>
    </div>
</body>

*{
    Rand: 0;
    Polsterung: 0;
}

Körper{
    Breite: 100 %;
    Höhe: 100vh;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Hintergrund: #333;
}

.Kasten{
    Breite: 300px;
    Höhe: 400px;
    Transformationsstil: 3D bewahren;
    Position: relativ;
}

.Gesicht{
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Transformationsstil: 3D bewahren;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Rückseitensichtbarkeit: versteckt;
    Übergang: 2 s Ein- und Ausfahren;
    transformieren: Perspektive (500px) Y-Drehung (0 Grad);
}

.Gesicht.Vorne{
    Hintergrund: #ff0;
}

.Gesicht.zurück{
    Hintergrund: #3bc2ff;
    Farbe: #fff;
    transformieren: Perspektive (500px) Y-Drehung (180 Grad);
}

.box:hover .face.front{
    transformieren: Perspektive (500px) Y-Drehung (180 Grad);
}

.box:hover .face.back{
    transformieren: Perspektive (500px) drehenY (360 Grad);
}

.box .face h2{
    Schriftgröße: 4em;
    Texttransformation: Großbuchstaben;
    transformieren: Perspektive (500px) übersetzenZ (50px);
}