CSS3 realisiert das Papierflugzeug aus der Kindheit

<!--Papierflieger der Kindheit-->
<div Klasse="Flugzeug">
    <div Klasse="Frontend-Show-Front">
        <!--Textfeld mit anpassbarer Breite und Höhe-->
        <div Klasse = "Texteingabe" contenteditable = true></div>
        <div Klasse="Fliegen">
            fliegen
        </div>
    </div>
    <div Klasse="Backup-Ende Show-Backup">
        <div Klasse="linke Ebene">
            <!--Klappbereich in der oberen linken Ecke-->
            <div Klasse = "left-top fold"></div>
            <!--Klappbereich in der unteren linken Ecke-->
            <div Klasse = "left-bottom fold"></div>
            <!--Body-->
            <div Klasse="Flügel Flügel1"></div>
            <div Klasse="Flügel Flügel2"></div>
        </div>
        <div Klasse="rechte Ebene">
            <!--Faltbereich in der oberen rechten Ecke-->
            <div Klasse = "Rechts oben gefaltet"></div>
            <!--Faltbereich in der unteren rechten Ecke-->
            <div Klasse = "right-bottom fold"></div>
            <!--Body-->
            <div Klasse="Flügel Flügel3"></div>
            <div Klasse="Flügel flügel4"></div>
        </div>
    </div>
</div>

Körper{
    Breite: 100 %;
    Höhe: 680px;
    Hintergrundfarbe: #000;
    Hintergrundwiederholung: keine Wiederholung;
    Überlauf: versteckt;
    Übergang: alle 2 s linear;
}
/*Schärfentiefe zum übergeordneten Element hinzugefügt*/
.Flugzeug{
    Breite: 100 %;
    Höhe: 100%;
    -Webkit-Perspektive: 800px;
    -WebKit-Perspektive-Ursprung: 50 % 50 %;
}
/*Vorderseite des Papierfliegers*/
/*Am Anfang nicht rotieren*/
.front-end.show-front{
    transformieren: drehenY(0Grad);
}
/*Zum Drehen klicken*/
.Frontend{
    Hintergrund: rgba(255, 255, 255, 0,15);
    *Hintergrund: hsl (0, 0 %, 88 %);
    /*-180 Grad um die Y-Achse drehen*/
    transformieren: Y-Drehung (-180 Grad);
    Position: relativ;
    Box-Größe: Rahmenbox;
    Polsterung: 20px;
    Textausrichtung: zentriert;
    Rückseitensichtbarkeit: versteckt;
    Breite: 400px;
    Höhe: 260px;
    oben: 240px;
    Übergang: alle 0,8 s Ein- und Ausfahren;
    Rand: automatisch;
}
/*Textfeld*/
.text-input{
    Breite: 100 %;
    maximale Breite: 360px;
    Mindesthöhe: 100px;
    Polsterung: 10px;
    Box-Größe: Rahmenbox;
    Höhe: 140px;
    Hintergrundfarbe: #ffffff;
    Schriftglättung: Subpixel-Antialiasing;
    Schriftgröße: 18px;
    Textausrichtung: links;
    Schriftfamilie: „Microsoft YaHei“, Helvetica, Arial, Verdana;
    Zeilenhöhe: 20px;
}
.fliegen{
    Übergang: alle 0,3 s Ein- und Ausfahren;
    /*hsl ist Farbton/Sättigung/Helligkeit/*/
    Rand: 2px durchgezogener hsl (194, 100 %, 72 %);
    Rand: 15px 0;
    Polsterung: 10px;
    Gliederung: keine;
    Schriftgröße: 18px;
    Cursor: Zeiger;
    Schriftfamilie: „Microsoft YaHei“;
    Hintergrundfarbe: hsl (0, 0 %, 94 %);
    Rahmenradius: 4px;
    Benutzerauswahl: keine;
}
/*Animation beim Klicken auf die Schaltfläche verkleinern*/
.fly:aktiv{
    transformieren: Skalierung (0,85);
    Übergang: alle 10 ms Ein- und Ausstieg;
    Hintergrundfarbe: hsl (0, 0 %, 85 %);
    Rand: 2px durchgezogener hsl (194, 30 %, 55 %);
}
.backup-ende{
    Perspektive: 600px;
    Perspektive-Ursprung: 200px 131px;
    Transformationsstil: 3D bewahren;
    Übergang: alle 0,8 s Ein- und Ausfahren;
    Rückseitensichtbarkeit: versteckt;
    Position: relativ;
    Breite: 400px;
    Höhe: 260px;
    Rand: automatisch;
}
/*Zeige das Flugzeug zuerst nicht*/
.backup-end.show-backup{
    transformieren: Y-Drehung (180 Grad);
}
/*Gemeinsame Stile für die linke und rechte Seite des Flugzeugs*/
.linke Ebene, .rechte Ebene{
    Transformationsstil: 3D bewahren;
    Breite: 200px;
    Höhe: 260px;
    Anzeige: Block;
    Position: absolut;
    oben: 0px;
    Übergang: alle 1en langsam rein-raus;
}
/*links*/
.linke Ebene{
    transformieren: drehenZ(0 Grad);
    Transform-Ursprung: 100 % 50 % 0;
    links: 0;
}
/*Rechts*/
.rechte Ebene{
    transformieren: drehenZ(0 Grad);
    Transform-Ursprung: 0 % 50 %;
    links: 199px;
}
/*Gemeinsamer Stil für linken und rechten Rumpf*/
.Flügel{
    Position: absolut;
    Transform-Ursprung: 0 0 0;
    Perspektive: 1px;
    Perspektivenherkunft: 50 % 50 %;
    Rückseitensichtbarkeit: versteckt;
    Übergang: alle 1,3 s linear;
    Box-Größe: Rahmenbox;
    Rand: 0;
    Polsterung: 0;
    Hintergrund: keiner;
    Rand: keiner;
    Rahmen oben: 240px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen unten: 0px durchgezogen, hsla (0, 0 %, 0 %, 0);
    Rahmen rechts: 100px durchgezogenes hsl (0, 0 %, 88 %);
    Breite: 0;
    Höhe: 0;
    unten: 0;
}
/*Zeichnen Sie den Prototyp des 2D-Flugzeugs*/
.Flügel1 {
    Transform-Ursprung: 100 % 100 %;
    transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*Offset-Rotation des 2D-Bildes*/
}

.flügel2 {
    transformieren: drehenZ(22,62 Grad);
    Transform-Ursprung: 100 % 100 %;
    Rahmen links: 100px durchgezogenes hsl (0, 0 %, 88 %);
    Rand rechts: keiner;
    links: 100px;
}

.Flügel3 {
    transformieren: drehenZ(-22,62 Grad);
    Transform-Ursprung: 0 % 100 %;
    Rahmen rechts: 100px durchgezogenes hsl (0, 0 %, 88 %);
}

.flügel4 {
    transformieren: verschiebeY(-38px) verschiebeX(-8px) dreheZ(-22,62 Grad) schrägY(22,62 Grad);
    Transform-Ursprung: 0 % 100 %;
    Rand rechts: keiner;
    Rahmen links: 100px durchgezogenes hsl (0, 0 %, 88 %);
    links: 100px;
}
/*Zeichnen Sie den faltbaren Bereich*/
.links-oben.fold{
    Position: absolut;
    Transform-Ursprung: 100px 112px;
    Übergangsverzögerung: 1300 ms;
    Breite: 0;
    Höhe: 0;
    oben: 0;
    Rahmen rechts: 202px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen unten: 202px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen oben: 222px durchgezogenes hsl (0, 0 %, 88 %);
}
.right-top.fold{
    Position: absolut;
    rechts: 0;
    Rahmen links: 202px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen unten: 202px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen oben: 222px durchgezogenes hsl (0, 0 %, 88 %);
    Transform-Ursprung: 96px 112px;
    Übergangsverzögerung: 1650 ms;
}
.links-unten.fold{
    Position: absolut;
    Transform-Ursprung: 109px 0;
    Übergangsverzögerung: 2100 ms;
    Breite: 109px;
    Höhe: 38px;
    Hintergrund: hsl (0, 0 %, 88 %);
    unten: 0;
    links: 0;
}
.rechts-unten.fold{
    Position: absolut;
    Transform-Ursprung: 0 0;
    Übergangsverzögerung: 2450 ms;
    Breite: 109px;
    Höhe: 38px;
    Hintergrund: hsl (0, 0 %, 88 %);
    unten: 0;
    rechts: 0;
}
/*Vervollständige den verbleibenden Dreiecksbereich des Faltschwanzes*/
.left-bottom.fold:nach {
    Position: absolut;
    Inhalt: "";
    Rahmen rechts: 92px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen unten: 39px durchgezogenes hsl (0, 0 %, 88 %);
    Rahmen oben: 37px durchgezogenes hsla (0, 0 %, 0 %, 0);
    links: 109px;
    unten: 0;
}

.right-bottom.fold:nach {
    Position: absolut;
    Inhalt: "";
    Rahmen links: 92px durchgezogenes hsla (0, 0 %, 0 %, 0);
    Rahmen unten: 39px durchgezogenes hsl (0, 0 %, 88 %);
    Rahmen oben: 37px durchgezogenes hsla (0, 0 %, 0 %, 0);
    links: -92px;
    unten: 0;
}

/********************************/
/****Beginnen Sie hier mit der Zusammenarbeit mit js*****/
/*Falteffekt*/
.falten {
    Übergang: Transformation, 800 ms, Ausklang;
    Rückseitensichtbarkeit: versteckt;
    Position: absolut;
    Hintergrundfarbe: transparent;
    Z-Index: 0;
    Breite: 0;
}
/* Falteffekt (linker Flügel, linkes Heck) */
.links-oben.falte.gebogen {
    transformieren: 3d drehen (1, -1,11,0,180 Grad);
}

.links-unten.fold.curved {
    transformieren: 3d drehen(2,4867,1,0,-180 Grad);
}
/* Falteffekt (rechter Flügel, rechtes Heck) */
.right-top.fold.curved {
    transformieren: 3d drehen(1,1,11,0,180 Grad);
}

.rechts-unten.falte.gebogen {
    transformieren: 3d drehen (-2,4867,1,0,180 Grad);
}

/*Legen Sie das gesamte Flugzeug flach*/
.Flugzeug.Hover {
    Transformieren: X-Drehung (54 Grad) Y-Drehung (-10 Grad) Z-Drehung (25 Grad);
    Übergangsverzögerung: 0,5 s;
}
/*Nach dem Flachlegen wird die linke Seite insgesamt gekippt (was den Falteffekt widerspiegelt)*/
.backup-end.hover .linke-Ebene {
    transformieren: Y-Drehung (60 Grad);
}

.backup-end.hover .right-plane {
    transformieren: Y-Drehung (-60 Grad);
}
/* Den linken Flügel in 3D-Ansicht ausrichten */
.backup-end.hover .wing1 {
    transformieren: verschiebeY(-38px) verschiebeX(8px) dreheZ(22,62 Grad) dreheY(-60 Grad) schrägeY(-22,62 Grad);
    Rahmen rechts: 100px durchgezogenes hsl (0, 0 %, 95 %);
}
/*Die Transparenz des linken Handteils des Flugzeugs ist reduziert*/
.backup-end.hover .wing2 {
    Rahmen links: 100px durchgezogenes hsl (0, 0 %, 85 %);
}

/* Den rechten Flügel in 3D-Ansicht ausrichten */
.backup-end.hover .wing4 {
    transformieren: verschiebeY(-38px) verschiebeX(-8px) dreheZ(-22,62 Grad) dreheY(60 Grad) schrägeY(20 Grad);
    Rahmen links: 100px durchgezogenes hsl (0, 0 %, 95 %);
}

/*Die Transparenz des rechten Handteils des Flugzeugs ist reduziert*/
.backup-end.hover .wing3 {
    Rahmen rechts: 100px durchgezogenes hsl (0, 0 %, 71 %);
}

/*Flügelfalteffekt (rechter Flügel, rechtes Heck) und dann werden die überschüssigen Teile versteckt*/
.backup-end.hover .curved {
    Anzeige: keine;
}

/* #wind_container.hover .wing {
    Rückseitensichtbarkeit: sichtbar;
} */


/* Flugzeug bewegt sich rückwärts*/
.backup-end.hover.fly_away_first {
    transformieren: verschiebeX(-100px) verschiebeZ(300px) dreheX(42 Grad) dreheY(-11 Grad) dreheZ(27 Grad);
    Übergangsverzögerung: 0 ms;
    Übergangsdauer: 0,4 s;
    Übergangs-Timing-Funktion: Easy-Out;
}
/* Das Flugzeug fliegt vorwärts, bis es verschwindet*/
.backup-end.hover.fly_away_first.fly_away {
    transformieren: übersetzenX(600px) übersetzenY(-400px) übersetzenZ(-5000px) drehenX(66 Grad) drehenY(-12 Grad) drehenZ(36 Grad);
    Übergang: Transformation 2 s Ausklang, Deckkraft 1,5 s 0,5 s linear;
    Deckkraft: 0;
}

// Papierflieger aus der Kindheit const fly = document.getElementsByClassName('fly')[0];
const front = document.getElementsByClassName('front-end')[0];
const Backup = document.getElementsByClassName('Backup-Ende')[0];
const fold = document.getElementsByClassName('fold');
fly.addEventListener('klicken', () => {
    zuerst().dann(zweite).dann(dritte).dann(vierte).dann(fünfte).catch((err)=> {
        console.log(fehler)
    });
}, FALSCH);
// Erster Schritt Funktion first() {
    gib ein neues Versprechen zurück ((suc, err) => {
        setzeTimeout(() => {
            // Informationsfeld ausblenden front.classList.remove('show-front');
            // Nach vorne blättern backup.classList.remove('show-backup');
            // Falteffekt (linker Flügel, rechter Flügel)
            für (sei i = 0; i < fold.length; i++) {
                fold[i].classList.add('gebogen')
            }
            // Farbtransformation document.body.style.backgroundColor = "#54575A";
            Erfolg(1)
        }, 200)
    })
}
Funktion Sekunde() {
    gib ein neues Versprechen zurück ((suc, err) => {
        setzeTimeout(Funktion () {
            Backup.classList.add('hover');
            Dokument.Body.Style.BackgroundColor = "#AD8BD8";
            Erfolg(2)
        }, 2800);
    })
}
//Schritt 3: Das Flugzeug bewegt sich rückwärts, um die Funktion third() { auszuführen.
    gib ein neues Versprechen zurück ((suc, err) => {
        setzeTimeout(Funktion () {
            Backup.classList.add('fly_away_first');
            Dokument.Body.Style.BackgroundColor = "#6E99C4";
            Erfolg(3)
        }, 2000);
    })
}
// Schritt 4: Das Flugzeug fliegt vorwärts, bis es verschwindet Funktion vierte() {
    gib ein neues Versprechen zurück ((suc, err) => {
        setzeTimeout(Funktion () {
            Backup.classList.add('wegfliegen');
            Dokument.Body.Style.BackgroundColor = "#3F9BFF";
            Erfolg(4)
        }, 600);
    })
}
Funktion fünfte() {
    gib ein neues Versprechen zurück ((suc, err) => {
        setzeTimeout(Funktion () {
            front.classList.add('vorne anzeigen');
            Backup.classList.remove('wegfliegen','zuerst_wegfliegen','schweben');
            Backup.classList.add('Backup anzeigen');
            für (sei i = 0; i < fold.length; i++) {
                falten[i].classList.remove('gebogen')
            }
            Dokument.Body.Style.BackgroundColor = "#000";
            Erfolg(5)
        }, 3000);
    })
}