3D Rotating Cube

## HTML 構造の作成 3D 立方体は、前面、背面、左面、右面、上面、下面の 6 つの面で構成されています。これらの面を 3D 空間に配置できる HTML 構造を作成する必要があります。プロジェクトディレクトリ内の `index.html` ファイルを開き、立方体の構造を作成するために必要な HTML コードを追加しましょう。 1. 左側のファイルエクスプローラーパネルを操作して WebIDE を開きます。 2. `index.html` ファイルをクリックしてエディターで開きます。 3. 以下の HTML コードをコピーしてファイルに貼り付けます。 ```html 3D Rotating Cube

Front

Back

Right

Left

Top

Bottom

``` この HTML 構造を理解しましょう。 - 標準的な HTML5 ドキュメント構造から始め、メタデータとタイトルを含めます。 - 次のステップで作成する CSS ファイル (`style.css`) へのリンクを設定します。 - ボディ内に、立方体をページの中央に配置するためのコンテナ `div` を作成します。 - コンテナの中に、3D オブジェクトとなる `cube` の `div` を配置します。 - 立方体の中に 6 つの `div` を定義し、それぞれに `face` クラスと、その位置を識別する追加のクラス（前面、背面など）を付けます。 - 各面には、その位置を示すテキストが含まれており、識別しやすくなっています。 ![Go Live Button](https://file.labex.io/namespace/33fa8aba-d546-42e9-9692-64968aeaf0cc/css/lab-3d-rotating-cube/ja/../assets/screenshot-20250306-az5YJw57@2x.png) 現在の進捗状況を確認するには、WebIDE の下部にある「Go Live」ボタンを探してクリックします。これにより、ローカルウェブサーバーが起動し、ブラウザーのタブが開き、ページが表示されます。現時点では、まだスタイルを適用していないため、各面のテキストが重なって表示されるだけです。 ![Preview](https://file.labex.io/namespace/33fa8aba-d546-42e9-9692-64968aeaf0cc/css/lab-3d-rotating-cube/ja/../assets/screenshot-20250306-MenieMpm@2x.png) 次のステップでは、CSS を使用してこれらの `div` を 3D 立方体の面に変換します。