Beispiel für die Erzeugung eines Flügelschlags eines Schmetterlings mit reinem CSS3

<div id="Schmetterling">
    <div Klasse="leftSide"></div>
    <div Klasse="body"></div>
    <div Klasse="rightSide"></div>
</div>

Körper{
            Hintergrund: URL("./images/bg.jpg") keine Wiederholung;
        }
        #Schmetterling{
            Breite: 600px;
            Höhe: 500px;
            Position: relativ;
            transformieren: Skalierung (0,35);
            Transformationsstil: 3D bewahren;
        }
        .linkeSeite{
            Breite: 267px;
            Höhe: 421px;
            Hintergrund: URL("./images/leftSide.png") keine Wiederholung;
            Position: absolut;
            links: 26px;
            oben: 40px;
            Animation: links 2s unendlich;
            Z-Index: 9999;
        }
        @Keyframes übrig {
            0 %{
                transformieren: drehenY(0Grad);
                Transform-Origin: rechts Mitte;
                Perspektive: 201px;

            }
            50 %{
                transformieren: Y-Drehung (70 Grad);
                Transform-Origin: rechts Mitte;
                Perspektive: 201px;

            }
            100 %{
                transformieren: drehenY(0Grad);
                Transform-Origin: rechts Mitte;
                Perspektive: 201px;
            }
        }
        @keyframes rechts {
            0 %{
                transformieren: drehenY(0);
                Transform-Origin: links Mitte;
                Perspektive: 201px;

            }
            50 %{
                transformieren: Y-Drehung (-70 Grad);
                Transform-Origin: links Mitte;
                Perspektive: 201px;

            }
            100 %{
                transformieren: drehenY(0);
                Transform-Origin: links Mitte;
                Perspektive: 201px;

            }
        }
        .Körper{
            Breite: 152px;
            Höhe: 328px;
            Hintergrund: URL("./images/body.png") keine Wiederholung;
            Position: absolut;
            Rand: automatisch;
            links: 0;
            rechts: 0;
            unten: 0;
            oben: 0;
            Z-Index: 9999;
        }
        .rechteSeite{
            Breite: 284px;
            Höhe: 460px;
            Hintergrund: URL("./images/rightSide.png") keine Wiederholung;
            Position: absolut;
            rechts: 26px;
            oben: 58px;
            Animation: rechts 2s unendlich;
            Z-Index: 9999;
        }