CSS3は子供のころの紙飛行機を実現する

<!--子供の頃の紙飛行機-->
<div class="飛行機">
    <div class="フロントエンド表示フロント">
        <!-- 幅と高さが調整可能なテキスト ボックス -->
        <div class="text-input" contenteditable = true></div>
        <div class="fly">
            飛ぶ
        </div>
    </div>
    <div class="バックアップ終了表示バックアップ">
        <div class="left-plane">
            <!--左上隅の折りたたみ領域-->
            <div class="left-top fold"></div>
            <!--左下隅の折りたたみ領域-->
            <div class="left-bottom fold"></div>
            <!--本文-->
            <div class="wing wing1"></div>
            <div class="wing wing2"></div>
        </div>
        <div class="右平面">
            <!--右上隅の折りたたみ領域-->
            <div class="右上折り返し"></div>
            <!--右下隅の折りたたみ領域-->
            <div class="右下折り畳み"></div>
            <!--本文-->
            <div class="wing wing3"></div>
            <div class="wing wing4"></div>
        </div>
    </div>
</div>

体{
    幅: 100%;
    高さ: 680ピクセル;
    背景色: #000;
    背景繰り返し: 繰り返しなし;
    オーバーフロー: 非表示;
    遷移: すべて 2 秒線形。
}
/*親に被写界深度を追加*/
。飛行機{
    幅: 100%;
    高さ: 100%;
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
}
/*紙飛行機の前面*/
/*最初は回転しない*/
.front-end.show-front{
    変換: rotateY(0deg);
}
/*クリックして回転*/
。フロントエンド{
    背景: rgba(255, 255, 255, 0.15);
    *背景: hsl(0, 0%, 88%);
    /*Y軸を中心に-180度回転*/
    変換: rotateY(-180deg);
    位置: 相対的;
    ボックスのサイズ: 境界線ボックス;
    パディング: 20px;
    テキスト配置: 中央;
    背面の可視性: 非表示;
    幅: 400ピクセル;
    高さ: 260px;
    上: 240px;
    遷移: すべて 0.8 秒のイーズイン アウト。
    マージン: 自動;
}
/*テキストボックス*/
.テキスト入力{
    幅: 100%;
    最大幅:360px;
    最小高さ:100px;
    パディング: 10px;
    ボックスのサイズ: 境界線ボックス;
    高さ: 140px;
    背景色: #ffffff;
    フォントスムージング: サブピクセルアンチエイリアス;
    フォントサイズ: 18px;
    テキスト配置: 左;
    フォント ファミリ: "Microsoft YaHei"、Helvetica、Arial、Verdana;
    行の高さ: 20px;
}
。飛ぶ{
    遷移: すべて 0.3 秒のイーズイン アウト。
    /*hsl は色相/彩度/明度です/*/
    境界線: 2px実線 hsl(194, 100%, 72%);
    マージン: 15px 0;
    パディング: 10px;
    アウトライン: なし;
    フォントサイズ: 18px;
    カーソル: ポインタ;
    フォントファミリ: "Microsoft YaHei";
    背景色: hsl(0, 0%, 94%);
    境界線の半径:4px;
    ユーザー選択: なし;
}
/*ボタンをクリックしたときにアニメーションを縮小する*/
.fly:アクティブ{
    変換: スケール(0.85);
    遷移: すべて 10 ミリ秒のイーズイン アウト。
    背景色: hsl(0, 0%, 85%);
    境界線: 2px実線 hsl(194, 30%, 55%);
}
.バックアップ終了{
    パースペクティブ: 600px;
    パースペクティブ原点: 200px 131px;
    変換スタイル: 3D を保持します。
    遷移: すべて 0.8 秒のイーズイン アウト。
    背面の可視性: 非表示;
    位置: 相対的;
    幅: 400ピクセル;
    高さ: 260px;
    マージン: 自動;
}
/*最初は飛行機を見せない*/
.backup-end.show-backup{
    変換: rotateY(180deg);
}
/*航空機の左側と右側の共通スタイル*/
.左平面、.右平面{
    変換スタイル: 3D を保持します。
    幅: 200ピクセル;
    高さ: 260px;
    表示: ブロック;
    位置: 絶対;
    上: 0px;
    遷移: すべて 1 のイーズイン アウト。
}
/*左*/
.左平面{
    変換: rotateZ(0deg);
    変換の原点: 100% 50% 0;
    左: 0;
}
/*右*/
.右平面{
    変換: rotateZ(0deg);
    変換の原点: 0% 50%;
    左: 199px;
}
/*左右胴体の共通スタイル*/
。翼{
    位置: 絶対;
    変換の原点: 0 0 0;
    パースペクティブ: 1px;
    視点原点: 50% 50%;
    背面の可視性: 非表示;
    遷移: すべて 1.3 秒線形。
    ボックスのサイズ: 境界線ボックス;
    マージン: 0;
    パディング: 0;
    背景: なし;
    境界線: なし;
    上境界線: 240px 実線 hsla(0, 0%, 0%, 0);
    下境界線: 0px 実線 hsla(0, 0%, 0%, 0);
    右境界線: 100px実線 hsl(0, 0%, 88%);
    幅: 0;
    高さ: 0;
    下部: 0;
}
/*2D航空機のプロトタイプを描く*/
.wing1 {
    変換の原点: 100% 100%;
    transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D画像のオフセット回転*/
}

.wing2 {
    変換: rotateZ(22.62deg);
    変換の原点: 100% 100%;
    左境界線: 100px 実線 hsl(0, 0%, 88%);
    右境界線: なし;
    左: 100px;
}

.wing3 {
    変換: rotateZ(-22.62deg);
    変換の原点: 0% 100%;
    右境界線: 100px実線 hsl(0, 0%, 88%);
}

.wing4 {
    変換: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
    変換の原点: 0% 100%;
    右境界線: なし;
    左境界線: 100px実線 hsl(0, 0%, 88%);
    左: 100px;
}
/*折り畳み可能な領域を描画する*/
.left-top.fold{
    位置: 絶対;
    変換の原点: 100px 112px;
    遷移遅延: 1300ms;
    幅: 0;
    高さ: 0;
    上: 0;
    右境界線: 202px 実線 hsla(0, 0%, 0%, 0);
    下境界線: 202px 実線 hsla(0, 0%, 0%, 0);
    上境界線: 222px 実線 hsl(0, 0%, 88%);
}
.right-top.fold{
    位置: 絶対;
    右: 0;
    左境界線: 202px 実線 hsla(0, 0%, 0%, 0);
    下境界線: 202px 実線 hsla(0, 0%, 0%, 0);
    上境界線: 222px 実線 hsl(0, 0%, 88%);
    変換の原点: 96px 112px;
    遷移遅延: 1650ms;
}
.left-bottom.fold{
    位置: 絶対;
    変換の原点: 109px 0;
    遷移遅延: 2100ms;
    幅: 109px;
    高さ: 38px;
    背景: hsl(0, 0%, 88%);
    下部: 0;
    左: 0;
}
.右下折り目{
    位置: 絶対;
    変換の原点: 0 0;
    遷移遅延: 2450ms;
    幅: 109px;
    高さ: 38px;
    背景: hsl(0, 0%, 88%);
    下部: 0;
    右: 0;
}
/*折り返し部分の残りの三角形の領域を完成させます*/
.left-bottom.fold:after {
    位置: 絶対;
    コンテンツ： "";
    右境界線: 92px 実線 hsla(0, 0%, 0%, 0);
    下境界線: 39px 実線 hsl(0, 0%, 88%);
    上境界線: 37px 実線 hsla(0, 0%, 0%, 0);
    左: 109px;
    下部: 0;
}

.right-bottom.fold:after {
    位置: 絶対;
    コンテンツ： "";
    左境界線: 92px 実線 hsla(0, 0%, 0%, 0);
    下境界線: 39px 実線 hsl(0, 0%, 88%);
    上境界線: 37px 実線 hsla(0, 0%, 0%, 0);
    左: -92px;
    下部: 0;
}

/********************************/
/****ここからjsとの連携を開始*****/
/*折り畳み効果*/
。折り畳み {
    遷移: transform 800ms イーズアウト;
    背面の可視性: 非表示;
    位置: 絶対;
    背景色: 透明;
    zインデックス: 0;
    幅: 0;
}
/* 折りたたみ効果（左翼、左尾翼） */
.left-top.fold.curved {
    変換: rotate3d(1,-1.11,0,180deg);
}

.left-bottom.fold.curved {
    変換: rotate3d(2.4867,1,0,-180deg);
}
/* 折りたたみ効果（右翼、右尾翼） */
.right-top.fold.curved {
    変換: rotate3d(1,1.11,0,180deg);
}

.right-bottom.fold.curved {
    変換: rotate3d(-2.4867,1,0,180deg);
}

/* 飛行機全体を平らにする */
.飛行機.ホバー{
    変換: rotateX(54度) rotateY(-10度) rotateZ(25度);
    遷移遅延: 0.5秒;
}
/*平らに置いた後、左側が全体的に傾いています（折り畳み効果を反映しています）*/
.backup-end.hover .left-plane {
    変換: rotateY(60deg);
}

.backup-end.hover .right-plane {
    変換: rotateY(-60deg);
}
/* 3Dビジョンで左翼を水平にする */
.backup-end.hover .wing1 {
    変換: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
    右境界線: 100px実線 hsl(0, 0%, 95%);
}
/*左機体手持ち部分の透明度を下げました*/
.backup-end.hover .wing2 {
    左境界線: 100px 実線 hsl(0, 0%, 85%);
}

/* 3Dビジョンで右翼を水平にする */
.backup-end.hover .wing4 {
    変換: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
    左境界線: 100px 実線 hsl(0, 0%, 95%);
}

/*航空機の右側の手持ち部分の透明度が低下します*/
.backup-end.hover .wing3 {
    右境界線: 100px実線 hsl(0, 0%, 71%);
}

/*翼を折り畳む効果（右翼、右尾翼）と余分な部分を非表示にする*/
.backup-end.hover .curved {
    表示: なし;
}

/* #wind_container.hover.wing {
    背面の可視性: 可視;
} */


/* 飛行機は後方へ移動します*/
.backup-end.hover.fly_away_first {
    変換: translateX(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
    遷移遅延: 0ms;
    遷移期間: 0.4秒;
    遷移タイミング関数: イーズアウト;
}
/* 飛行機は消えるまで前方に飛行します */
.backup-end.hover.fly_away_first.fly_away {
    変換: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
    遷移: transform 2s easy-out、不透明度 1.5s 0.5s linear;
    不透明度: 0;
}

// 子供の頃の紙飛行機 const fly = document.getElementsByClassName('fly')[0];
フロントエンド
const バックアップ = document.getElementsByClassName('backup-end')[0];
折り畳み = document.getElementsByClassName('折り畳み');
fly.addEventListener('クリック', () => {
    最初()、次に(2番目)、次に(3番目)、次に(4番目)、次に(5番目)、キャッチ((err)=> {
        コンソール.log(エラー)
    });
}、 間違い）;
// 最初のステップ関数 first() {
    新しい Promise((suc, err) => { を返す
        タイムアウトを設定する(() => {
            // 情報パネルを非表示にします front.classList.remove('show-front');
            // 前面に反転します。backup.classList.remove('show-backup');
            // 折り畳み効果（左翼、右翼）
            (i = 0 とします; i < fold.length; i++) {
                fold[i].classList.add('curved')
            }
            // 色変換 document.body.style.backgroundColor = "#54575A";
            成功した(1)
        }, 200)
    })
}
関数 second() {
    新しい Promise((suc, err) => { を返す
        setTimeout(関数() {
            バックアップクラスリストに「ホバー」を追加します。
            document.body.style.backgroundColor = "#AD8BD8";
            成功した(2)
        }, 2800);
    })
}
//ステップ3: 飛行機は後進して走行を開始する function third() {
    新しい Promise((suc, err) => { を返す
        setTimeout(関数() {
            バックアップクラスリストに「fly_away_first」を追加します。
            ドキュメントのbodyスタイルの背景色 = "#6E99C4";
            成功した(3)
        }, 2000);
    })
}
// ステップ4: 飛行機は消えるまで前方に飛行します function fourth() {
    新しい Promise((suc, err) => { を返す
        setTimeout(関数() {
            バックアップクラスリストに「fly_away」を追加します。
            ドキュメントのbodyスタイルの背景色 = "#3F9BFF";
            成功した(4)
        }, 600);
    })
}
関数 5番目() {
    新しい Promise((suc, err) => { を返す
        setTimeout(関数() {
            front.classList.add('show-front');
            バックアップクラスリストを削除します('fly_away'、'fly_away_first'、'hover');
            バックアップクラスリストに「バックアップを表示」を追加します。
            (i = 0 とします; i < fold.length; i++) {
                fold[i].classList.remove('curved')
            }
            ドキュメント本体スタイルの背景色 = "#000";
            成功した(5)
        }, 3000);
    })
}