CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!

みなさんこんにちは、Counterです。この章では、Weiboは主にCSS3のいくつかの新機能を使用します。

キーフレームは主に 3D グラフィックスを動かすために使用され、抽象的なアイデアと 3 次元の想像力を必要とします。

まずは完成したエフェクトをお見せしましょう。コードは難しくなく、各行に詳細なコメントが付けられています。JS のない純粋な CSS です。CSS3 は良いですね。

効果は以下のとおりです。

各行にコメントがあるので、繰り返しません。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>3D 回転</title>
    <スタイル>
        /* 最も外側の親の被写界深度を設定して、内部の要素に 3 次元空間を与え、幅と高さを設定します */
        .ラッパー{
            /* 被写界深度 600 ピクセル */
            パースペクティブ: 500px;
            /* マージン距離を上部で 100px、左右で適応型、下部で 0 に設定します */
            マージン: 100px 自動 0;
            幅: 200ピクセル;
            高さ: 200px;
            /* 境界線: 1px 黒一色; */
        }
        
        。箱 {
            /* 子要素が自分自身に対して相対的に配置されるように相対的な配置を設定します*/
            位置: 相対的;
            /* 3D 効果を保持する項目を設定します。要素が設定されていない場合、3D 効果は表示されません */
            変換スタイル: 3D を保持します。
            幅: 200ピクセル;
            高さ: 200px;
            /* 移動はキーフレームセット、8秒間の移動、等速移動、無限回（各パラメータの意味） */
            アニメーション: 8 秒間の線形無限移動。
        }

        /* item で始まるすべての要素を選択し、それらをすべて親の位置に配置します */
        div[クラス^="item"] {
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 200ピクセル;
            高さ: 200px;
            /* テキストを左右に揃える */
            テキスト配置: 中央;
            /* テキストを垂直に揃える */
            行の高さ: 200px;
        }

        /* 立方体には 6 つの面があり、各項目 1 ～ 6 は各面を表し、内部の項目 1 ～ 6 には x、y、z の 3 つの軸があります */
        /* x 軸は、コンピュータ画面の左から右への幅です。 Y 軸は、コンピューター画面の上から下までの高さの軸です。 Z軸は、コンピュータ画面を垂直に見る目からの軸であり、方向はコンピュータ画面から目への軸です*/
        /* 最初の辺を設定する */
        .item1 {  
            /* 視線の方向に Z 軸に沿って 100 ピクセル移動します */
            変換: translateZ(100px);
            /* 背景色を設定します。最後のパラメータは透明度を 0.6 に設定します */
            背景色: rgba(255, 0, 0, 0.6);
        }
        /* 2番目のサイドを設定します */
        .item2 {
            /* Z軸に沿って100px内側に移動すると-100pxになります */
            変換: translateZ(-100px);
            背景色: rgba(72, 42, 245, 0.6);
        }
        /* 3番目の辺を設定します */
        .item3 {
            /* x軸に沿って90度回転し、z軸に沿って100ピクセル移動します（ここでのdegは度を意味します）*/
            変換: 回転X(90度) 移動Z(100ピクセル);
            背景色: rgba(217, 230, 36, 0.6);
        }
        /* 4番目の辺を設定します */
        .item4 {
            /* x軸に沿って90度回転し、z軸に沿って-100px移動します */
            変換: 回転X(90度) 移動Z(-100px);
            背景色: rgba(58, 7, 51, 0.6);
        }
        /* 5番目の辺を設定します */
        .item5 {
            /* y軸に沿って90度回転し、z軸に沿って-100px移動します */
            変換: 回転Y(90度) 移動Z(-100px);
            背景色: rgba(241, 142, 75, 0.6);
        }
        /* 6 番目の辺を設定します */
        .item6 {
            /* y軸に沿って90度回転し、z軸に沿って100ピクセル移動します */
            変換: 回転Y(90度) 移動Z(100ピクセル);
            背景色: rgba(125, 178, 238, 0.6);
        }

        /* ボックス コンテナーを回転させるキーフレームを設定し、それぞれ x、y、z 軸に沿って 0 から 360 度回転します */
        @keyframes 移動 {
            0% {
                変換: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                変換: 回転X(360度) 回転Y(360度) 回転Z(360度);
            }
        }
    </スタイル>
</head>
<本文>
    <div class="wrapper">
        <div class="box">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
        </div>
    </div>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

>>: MySQLインスタンスが起動できない問題の分析と解決