CSS で 3D ルービックキューブを実装するサンプルコード

今日は簡単な3Dルービックキューブを作ってみましょう

まずはレンダリングを見てみましょう！これを学んだ後、インターネット上のいくつかの3Dフォトアルバムを使用できるようになります

1.まずHTMLコードを準備しましょう

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <title>3D ルービック キューブ</title>
        <メタ文字セット="UTF-8">
    </head>
    <本文>
    	<div class="top"></div> <!--トップ-->
    	<div class="bottom"></div> <!--次へ-->
    	<div class="left"></div> <!--左-->
    	<div class="right"></div> <!--右-->
    	<div class="after"></div> <!--後-->
    	<div class="before"></div> <!--前-->
    </本文>
</html>

さて、HTML コードの準備ができました。まず、3D 思考を身に付けて、脳内でルービックキューブがどのような形をしているかを想像する必要があります。6 つの面で構成されているのではないですか?

2. CSSスタイルを追加する

*{
    margin:0; /* デフォルトのスタイルは余白を削除します*/
    パディング:0;
}
div{ /*div 一般的なスタイル設定の高さと幅*/
    幅: 300ピクセル;
    高さ: 300px;
    不透明度:0.5; /*透明度*/
}
.top{ /* クラス名で色を設定します。以下はすべて設定されている色です*/
    背景色:茶色;				
}
。底{
    背景色:青紫;
}
。左{
    背景色:ブランチダルモンド;
}
。右{
    背景色:cadetblue;
}
。後{
    背景色:チョコレート;
}
。前に{
    背景色:シアン;
}

さて、この時点で基礎は築かれており、建物の建設を開始できます。

これが、皆さんが目にする効果です注意我這里是縮小了。皆さんも私と同じブロックをすべて隣り合わせに、柱のように積み重ねて表示しているはずです。今、私たちはそれらを紙切れのようにつなぎ合わせ始めなければなりません。

2. divを重ねる

div{							
    幅: 300ピクセル;
    高さ: 300px;
    position: absolute; /*divの一般的なスタイルに絶対位置を追加します*/
}
body{ /*次の手順は、すべてのdivを画面の中央に配置することです*/
    高さ：100vh;
    幅：100vw;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

これでこの効果が見えました。明らかに 6 つの四角形がありますが、なぜ 1 つしかないのでしょうか。実はそうではありません。他の div がこの div の後ろにあり、前面の div が視界を遮っているため、この div が見えないのです。

3. 3D空間を開く

体{
    transform-style: preserve-3d; /*3D 空間を有効にするにはこのコードのみが必要です*/
    高さ：100vh;
    幅：100vw;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

divをまとめる

。トップ{
    背景色:茶色;
    transform:rotateX(90deg) translateZ(150px); /*まず回転してからオフセット*/
}
。底{
    背景色:青紫;
    変換:回転X(-90度) 移動Z(150ピクセル);
}
。左{
    背景色:ブランチダルモンド;
    変換:Y軸を回転(-90度)、Z軸を移動(150ピクセル)。
}
。右{
    背景色:cadetblue;
    変換:Y軸を90度回転、Z軸を150ピクセル移動します。
}
。後{
    背景色:チョコレート;
    変換:Y軸を180度回転、Z軸を150ピクセル移動します。
}
。前に{
    背景色:シアン;
    変換:Y軸を回転(0度)、Z軸を移動(150ピクセル)。
}

表示されるのはこのように見えるはずです。実際、ルービックキューブの組み立ては完了していますが、ルービックキューブは平らに置かれていて見えません。そのため、回転させるアニメーションを作成します。你給div加上一點文字更容易觀察

4. アニメーションの回転

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <title>3D ルービック キューブ</title>
        <メタ文字セット="UTF-8">
        <スタイル タイプ="text/css">
*{
    マージン:0;           
    /* デフォルトのスタイルでは余白が削除されます*/
    パディング:0;
}
div{
    幅: 300ピクセル;
    高さ: 300px;
    位置: 絶対;
    不透明度: 0.5;
    テキスト配置: 中央;
    行の高さ: 300px;
}
体{
    変換スタイル: 3D を保持します。
    高さ：100vh;
    アニメーション: fram1 10s イーズ; /*参照アニメーション*/
    幅：100vw;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

。トップ{
    背景色:茶色;
    変換:回転X(90度) 移動Z(150ピクセル);

}
。底{
    背景色:青紫;
    変換:回転X(-90度) 移動Z(150ピクセル);
}
。左{
    背景色:ブランチダルモンド;
    変換:Y軸を回転(-90度)、Z軸を移動(150ピクセル)。
}
。右{
    背景色:cadetblue;
    変換:Y軸を90度回転、Z軸を150ピクセル移動します。

}
。後{
    背景色:チョコレート;
    変換:Y軸を180度回転、Z軸を150ピクセル移動します。
}
。前に{
    背景色:シアン;
    変換:Y軸を回転(0度)、Z軸を移動(150ピクセル)。
}
@keyframes fram1{ /* アニメーションの回転 X 軸と Y 軸 */
    0%,100%{
        変換: rotateY(0deg) rotateX(0deg);
    }
    50%{
        変換: rotateY(180deg)、rotateX(180deg);

    }
}
        </スタイル>
    </head>
    <body> <!-- 視覚的にわかりやすくするためにテキストを追加します -->
    	<div class="top">1</div> 			
    	<div class="bottom">2</div>		
    	<div class="left">3</div>		
    	<div class="right">4</div>		
    	<div class="after">5</div>		
    	<div class="before">6</div>		
    </本文>
</html>

すべてのコードはここにあります。私はあなたと一緒にそれを完成させました。3D フォトアルバムを作成する場合は、div に背景画像を追加し、 background-color替換為background-image

V. 結論

詳細についてお話ししましょう！もちろん、これが一番大事なことでもあるので、ぜひご覧になってください。これまで見てきたのは、スプライシングプロセスのコードだけです。まず、 width:300px與height:300pxの div を 6 つ作成しました。これらをposition:absoluteで重ね合わせました。絶対配置にするとレイヤーが重なるということを覚えておいてください。z z-inde:レイヤーを制御できます。次に、最も重要な部分であるtransform:rotateX(90deg) translateZ(150px);について説明します。なぜ最初に回転してからここでオフセットするのでしょうか。