CSS3 回転キューブ問題の詳細な説明

3D座標の概念

要素が回転すると、その座標軸も一緒に回転します。
注 -y方向の問題

立方体を回転させる効果

分析する

コンテナには6つのdivが含まれます
位置: 絶対、6つの面が完全に重なる
変換によって対応する位置に調整します: rotateX/Y/Z()、translateX/Y/Z()
トランジションアニメーション効果を追加する
ここでの回転は中心線を中心に行われるため、100pxのみ
彼が回転すると、座標軸も一緒に回転します（これは非常に重要です）

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0px;
            パディング: 0px;

        }
        体{
            パースペクティブ: 800px;
            背景: #000000;
        }
        ＃容器{
            高さ: 200px;
            幅: 200ピクセル;
            マージン: 100px 自動 0;
            位置: 相対的;
            変換スタイル: 3D を保持します。
            アニメーション: 1 秒移動、緩和時間無制限;

        }
        @keyframes 移動{
            から{
                変換: rotateY(0deg) rotateZ(0deg);
            }
            に{
                変換: rotateY(360deg)、rotateZ(360deg);
            }
            
        }
        #コンテナ>div{
            高さ: 100%;
            幅: 100%;
            境界線の半径: 5px;
            背景: rgba(255,255,255,0.5);
            位置: 絶対;
            左: 0px;
            右: 0px;
            テキスト配置: 中央;
            行の高さ: 200px;
            フォントサイズ: 30px;
        }
        ＃1つ{
            変換:回転X(-90度) 移動Z(100ピクセル);
        }
        ＃二{
            変換:translateZ(100px);
        }
        ＃三つ{
            変換: 回転Y(-90度) 移動Z(100ピクセル);
        }
        #4{
            変換: 回転Y(-180度) 移動Z(100ピクセル);
        }
        ＃五{
            変換: 回転Y(90度) 移動Z(100ピクセル);
        }
        ＃六{
            変換: translateZ(-100px);
        }
        
    </スタイル>
</head>
<本文>
    <div id="コンテナ">
        <div id="one">1</div>
        <div id="2">2</div>
        <div id="3">3</div>
        <div id="4">4</div>
        <div id="5">5</div>
        <div id="6">6</div>
    </div>
</本文>
</html>

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

<<: 子コンポーネントで vue activated を使用する詳細

>>: 将来的に人気のあるウェブサイトのナビゲーションの方向