HTML と CSS で魅力的な 3D 回転立方体を作成する

はじめに

この実験では、HTML と CSS を使用して 3D 回転立方体を作成します。この立方体は 6 つの異なる色の面を持ち、3D 空間で連続的に回転します。これにより、CSS の 3D 変形とアニメーションの機能を実証します。このプロジェクトは、CSS の 3D 機能の素晴らしい入門となり、JavaScript を必要とせずに要素を 3D 空間に配置してアニメーション化する方法を視覚的に理解することができます。

HTML 構造を作成する

3D 立方体は、前面、背面、左面、右面、上面、下面の 6 つの面で構成されています。これらの面を 3D 空間に配置できる HTML 構造を作成する必要があります。

プロジェクトディレクトリ内の index.html ファイルを開き、立方体の構造を作成するために必要な HTML コードを追加しましょう。

左側のファイルエクスプローラーパネルを操作して WebIDE を開きます。
index.html ファイルをクリックしてエディターで開きます。
以下の HTML コードをコピーしてファイルに貼り付けます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Cube</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="cube">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face right">Right</div>
        <div class="face left">Left</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
      </div>
    </div>
  </body>
</html>

この HTML 構造を理解しましょう。

標準的な HTML5 ドキュメント構造から始め、メタデータとタイトルを含めます。
次のステップで作成する CSS ファイル (style.css) へのリンクを設定します。
ボディ内に、立方体をページの中央に配置するためのコンテナ div を作成します。
コンテナの中に、3D オブジェクトとなる cube の div を配置します。
立方体の中に 6 つの div を定義し、それぞれに face クラスと、その位置を識別する追加のクラス（前面、背面など）を付けます。
各面には、その位置を示すテキストが含まれており、識別しやすくなっています。

Go Live Button

現在の進捗状況を確認するには、WebIDE の下部にある「Go Live」ボタンを探してクリックします。これにより、ローカルウェブサーバーが起動し、ブラウザーのタブが開き、ページが表示されます。現時点では、まだスタイルを適用していないため、各面のテキストが重なって表示されるだけです。

Preview of the cube with unstyled faces

次のステップでは、CSS を使用してこれらの div を 3D 立方体の面に変換します。

基本的な CSS スタイルを作成する

HTML 構造ができたので、これをスタイリングして 3D 立方体の基礎を作りましょう。このステップでは、立方体のコンテナを作成し、立方体の面をスタイリングするために必要な CSS を追加します。

WebIDE で、ファイルエクスプローラーパネルの style.css ファイルをクリックして開きます。
以下の CSS コードをコピーしてファイルに貼り付けます。

/* Basic reset and page styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Container styling with perspective */
.container {
  perspective: 1000px;
  /* The perspective property defines how far the object is from the viewer */
  /* A smaller value creates a more intense 3D effect */
}

/* Cube container styles */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  /* This tells the browser that child elements should be positioned in 3D space */
}

/* Common styles for all faces */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

先ほど追加した CSS を理解しましょう。

まず、マージンとパディングをゼロに設定することで、ブラウザ間で一貫したスタイリングを確保するための基本的な CSS リセットを適用します。
flexbox を使用して、body 要素をスタイリングし、立方体をページ上で垂直および水平方向に中央に配置します。
.container クラスには perspective プロパティが含まれており、これは 3D エフェクトに不可欠です。これは、立方体からどれだけ離れて立っているかを設定するようなものです。1000px の値は適度な 3D エフェクトを提供します。
.cube クラスは、立方体の寸法（200px × 200px）を定義し、transform-style: preserve-3d を使用します。このプロパティは、子要素を 3D 空間に配置するようブラウザに指示するため、非常に重要です。
.face クラスには、6 つの面すべてに共通のスタイルが含まれています。
- position: absolute を使用することで、面を同じ空間に配置できます。
- 各面は立方体と同じ寸法（200px × 200px）を持ちます。
- flexbox を使用して、各面のテキストを中央に配置します。
- 視認性を高めるために、白い枠線と影付きのテキストを追加します。

ここで、「Go Live」のブラウザタブを更新すると、何らかの変化が見られるはずですが、面はまだ重なって表示されています。これは、まだ面を 3D 空間に配置していないからです。次のステップでそれを行います。

CSS styles for a 3D cube container

立方体の面を 3D 空間に配置する

ここでは、立方体の各面を 3D 空間に配置する必要があります。立方体を作成するには、各面を立方体の幅の半分（100px）の距離だけ中心から 6 つの異なる方向に配置する必要があります。

これを実現するために、CSS の 3D トランスフォームを使用します。

translateZ() は、要素を Z 軸に沿って前方または後方に移動させます。
rotateX() は、要素を水平な X 軸を中心に回転させます。
rotateY() は、要素を垂直な Y 軸を中心に回転させます。

各面を配置するための CSS を追加しましょう。

WebIDE で style.css が開いたままの状態で、ファイルの末尾に以下の CSS コードを追加します。

/* Position each face of the cube */
.front {
  background-color: #ff8a65; /* Coral */
  transform: translateZ(100px);
  /* Moves the front face 100px towards the viewer */
}

.back {
  background-color: #4fc3f7; /* Light Blue */
  transform: rotateY(180deg) translateZ(100px);
  /* Rotates 180° around Y-axis and moves 100px forward */
}

.right {
  background-color: #81c784; /* Light Green */
  transform: rotateY(90deg) translateZ(100px);
  /* Rotates 90° right around Y-axis and moves 100px forward */
}

.left {
  background-color: #9575cd; /* Purple */
  transform: rotateY(-90deg) translateZ(100px);
  /* Rotates 90° left around Y-axis and moves 100px forward */
}

.top {
  background-color: #ffb74d; /* Orange */
  transform: rotateX(90deg) translateZ(100px);
  /* Rotates 90° upward around X-axis and moves 100px forward */
}

.bottom {
  background-color: #f06292; /* Pink */
  transform: rotateX(-90deg) translateZ(100px);
  /* Rotates 90° downward around X-axis and moves 100px forward */
}

この CSS が何をするかを理解しましょう。

各面に異なる背景色を設定して、視覚的に区別できるようにします。
各面に対して、正しく配置するための特定のトランスフォームを適用します。
- 前面は、単に Z 軸に沿って視聴者の方に 100px 移動します。
- 背面は、Y 軸を中心に 180°回転し、前方に 100px 移動します。
- 右面は、Y 軸を中心に時計回りに 90°回転し、前方に 100px 移動します。
- 左面は、Y 軸を中心に反時計回りに 90°回転し、前方に 100px 移動します。
- 上面は、X 軸を中心に上方向に 90°回転し、前方に 100px 移動します。
- 下面は、X 軸を中心に下方向に 90°回転し、前方に 100px 移動します。

ここでブラウザのタブを更新して、変更を確認しましょう。立方体の前面が見えるはずです。ただし、立方体はまだ回転していないので、他の面は見えません。次のステップで回転アニメーションを追加します。

3D トランスフォームの仕組み：

rotateY(90deg) トランスフォームを適用すると、要素を Y 軸（垂直軸）を中心に 90 度回転させ、右を向くようにします。
回転後に translateZ(100px) を適用すると、要素を現在向いている方向に 100px 前方に移動させます（これは前の回転によって異なる方向になります）。
これらのトランスフォームを組み合わせることで、各面を正しい位置と向きに配置して立方体を形成することができます。

Cube faces positioned in 3D space

立方体を回転させるアニメーションを追加する

現在、立方体は適切に構築されていますが、静止しています。もっと面白くするために、立方体が 3D 空間で連続的に回転するアニメーションを追加しましょう。

CSS アニメーションを使用すると、JavaScript を使わずにウェブページ上に動きを作成することができます。キーフレームアニメーションを定義し、立方体に適用します。

WebIDE で、style.css ファイルの末尾に以下の CSS コードを追加します。

/* Define the rotation animation */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Apply the animation to the cube */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
  /* 20s defines the duration of one complete rotation */
  /* infinite means the animation will repeat forever */
  /* linear means the animation speed is constant */
}

この CSS を理解しましょう。

@keyframes ルールは rotate という名前のアニメーションを定義します。
- これは、アニメーションのさまざまな段階で要素がどのように見えるべきかを指定します。
- 0% では、立方体は回転していません。
- 25% では、立方体は X 軸と Y 軸の両方で 90 度回転しています。
- 50% では、立方体は両軸で 180 度回転しています。
- 75% では、立方体は両軸で 270 度回転しています。
- 100% では、立方体は両軸で 360 度の完全な回転を完了しています。
.cube セレクタを更新して、このアニメーションを適用します。
- animation: rotate 20s infinite linear は rotate アニメーションを適用します。
- アニメーションは 1 回の完全な回転に 20 秒かかります。
- アニメーションは無限に繰り返されます。
- 線形のタイミング関数により、一定の回転速度が保たれます。

ここでブラウザのタブを更新しましょう。立方体が 3D 空間で滑らかに回転し、回転する際に 6 つの色付きの面がすべて表示されるのが見えるはずです。

CSS アニメーションの理解：

CSS アニメーションは 2 つの要素で構成されています。アニメーションを記述するスタイルと、さまざまな時点でのアニメーションの状態を定義する一連のキーフレームです。
animation プロパティは、いくつかのアニメーションプロパティの省略形です。
- animation-name：@keyframes ルールの名前を指定します。
- animation-duration：アニメーションが 1 サイクルを完了するのにかかる時間を指定します。
- animation-timing-function：アニメーションが 1 サイクルを進む方法を定義します。
- animation-iteration-count：アニメーションを繰り返す回数を指定します。

これで、HTML と CSS だけを使って回転する 3D 立方体を成功させました。この例は、JavaScript を必要とせずに視覚的に魅力的なウェブ要素を作成するための CSS 3D トランスフォームとアニメーションの威力を示しています。

異なるアニメーションの持続時間、異なる回転軸を試したり、さらに追加のトランスフォームを加えて、立方体にどのような影響があるかを確認してみてください。

Rotating 3D cube animation preview

まとめ

3D 回転立方体の実験を完了したことをお祝いします。この実験では、以下のことを行いました。

3D 立方体の 6 つの面を持つ HTML 構造を作成しました。
要素を 3D 空間に配置するための CSS スタイリングを適用しました。
CSS 3D トランスフォームを使用して、各面を 3D 空間に正しく配置しました。
CSS アニメーションを追加して、連続的に回転する立方体を作成しました。

このプロジェクトでは、いくつかの重要な CSS 概念を紹介しました。

CSS 3D トランスフォーム（translate、rotate）
3D 効果のための perspective プロパティ
3D 配置を維持するための transform-style プロパティ
CSS キーフレームアニメーション

これらの概念は、JavaScript に依存せずに魅力的でインタラクティブなウェブインターフェイスを作成するための強力なツールです。これらの技術を適用して、シンプルな回転カードから複雑な 3D モデルまで、さまざまな 3D 要素を作成することができます。

このプロジェクトの拡張として、以下のことを検討することができます。

ユーザーが立方体にホバーしたときにアニメーションを一時停止するホバーエフェクトを追加する
各面に画像やより複雑なコンテンツを追加する
キーフレームを変更して、異なるアニメーションパスを作成する
異なるサイズ、色、回転速度を試す

現代の CSS は視覚効果を作成するために非常に強力であり、以前は JavaScript が必要だった多くのアニメーションが今では CSS だけで実現できるようになっており、パフォーマンスが向上し、コードが簡素化されます。