はじめに
この実験では、HTML と CSS を使用して 3D 回転立方体を作成します。この立方体は 6 つの異なる色の面を持ち、3D 空間で連続的に回転します。これにより、CSS の 3D 変形とアニメーションの機能を実証します。このプロジェクトは、CSS の 3D 機能の素晴らしい入門となり、JavaScript を必要とせずに要素を 3D 空間に配置してアニメーション化する方法を視覚的に理解することができます。
この実験では、HTML と CSS を使用して 3D 回転立方体を作成します。この立方体は 6 つの異なる色の面を持ち、3D 空間で連続的に回転します。これにより、CSS の 3D 変形とアニメーションの機能を実証します。このプロジェクトは、CSS の 3D 機能の素晴らしい入門となり、JavaScript を必要とせずに要素を 3D 空間に配置してアニメーション化する方法を視覚的に理解することができます。
3D 立方体は、前面、背面、左面、右面、上面、下面の 6 つの面で構成されています。これらの面を 3D 空間に配置できる HTML 構造を作成する必要があります。
プロジェクトディレクトリ内の index.html
ファイルを開き、立方体の構造を作成するために必要な HTML コードを追加しましょう。
index.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 構造を理解しましょう。
style.css
) へのリンクを設定します。div
を作成します。cube
の div
を配置します。div
を定義し、それぞれに face
クラスと、その位置を識別する追加のクラス(前面、背面など)を付けます。現在の進捗状況を確認するには、WebIDE の下部にある「Go Live」ボタンを探してクリックします。これにより、ローカルウェブサーバーが起動し、ブラウザーのタブが開き、ページが表示されます。現時点では、まだスタイルを適用していないため、各面のテキストが重なって表示されるだけです。
次のステップでは、CSS を使用してこれらの div
を 3D 立方体の面に変換します。
HTML 構造ができたので、これをスタイリングして 3D 立方体の基礎を作りましょう。このステップでは、立方体のコンテナを作成し、立方体の面をスタイリングするために必要な CSS を追加します。
style.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 を理解しましょう。
body
要素をスタイリングし、立方体をページ上で垂直および水平方向に中央に配置します。.container
クラスには perspective
プロパティが含まれており、これは 3D エフェクトに不可欠です。これは、立方体からどれだけ離れて立っているかを設定するようなものです。1000px の値は適度な 3D エフェクトを提供します。.cube
クラスは、立方体の寸法(200px × 200px)を定義し、transform-style: preserve-3d
を使用します。このプロパティは、子要素を 3D 空間に配置するようブラウザに指示するため、非常に重要です。.face
クラスには、6 つの面すべてに共通のスタイルが含まれています。
position: absolute
を使用することで、面を同じ空間に配置できます。ここで、「Go Live」のブラウザタブを更新すると、何らかの変化が見られるはずですが、面はまだ重なって表示されています。これは、まだ面を 3D 空間に配置していないからです。次のステップでそれを行います。
ここでは、立方体の各面を 3D 空間に配置する必要があります。立方体を作成するには、各面を立方体の幅の半分(100px)の距離だけ中心から 6 つの異なる方向に配置する必要があります。
これを実現するために、CSS の 3D トランスフォームを使用します。
translateZ()
は、要素を Z 軸に沿って前方または後方に移動させます。rotateX()
は、要素を水平な X 軸を中心に回転させます。rotateY()
は、要素を垂直な Y 軸を中心に回転させます。各面を配置するための CSS を追加しましょう。
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 が何をするかを理解しましょう。
ここでブラウザのタブを更新して、変更を確認しましょう。立方体の前面が見えるはずです。ただし、立方体はまだ回転していないので、他の面は見えません。次のステップで回転アニメーションを追加します。
3D トランスフォームの仕組み:
rotateY(90deg)
トランスフォームを適用すると、要素を Y 軸(垂直軸)を中心に 90 度回転させ、右を向くようにします。translateZ(100px)
を適用すると、要素を現在向いている方向に 100px 前方に移動させます(これは前の回転によって異なる方向になります)。現在、立方体は適切に構築されていますが、静止しています。もっと面白くするために、立方体が 3D 空間で連続的に回転するアニメーションを追加しましょう。
CSS アニメーションを使用すると、JavaScript を使わずにウェブページ上に動きを作成することができます。キーフレームアニメーションを定義し、立方体に適用します。
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
という名前のアニメーションを定義します。
.cube
セレクタを更新して、このアニメーションを適用します。
animation: rotate 20s infinite linear
は rotate
アニメーションを適用します。ここでブラウザのタブを更新しましょう。立方体が 3D 空間で滑らかに回転し、回転する際に 6 つの色付きの面がすべて表示されるのが見えるはずです。
CSS アニメーションの理解:
animation
プロパティは、いくつかのアニメーションプロパティの省略形です。
animation-name
:@keyframes
ルールの名前を指定します。animation-duration
:アニメーションが 1 サイクルを完了するのにかかる時間を指定します。animation-timing-function
:アニメーションが 1 サイクルを進む方法を定義します。animation-iteration-count
:アニメーションを繰り返す回数を指定します。これで、HTML と CSS だけを使って回転する 3D 立方体を成功させました。この例は、JavaScript を必要とせずに視覚的に魅力的なウェブ要素を作成するための CSS 3D トランスフォームとアニメーションの威力を示しています。
異なるアニメーションの持続時間、異なる回転軸を試したり、さらに追加のトランスフォームを加えて、立方体にどのような影響があるかを確認してみてください。
3D 回転立方体の実験を完了したことをお祝いします。この実験では、以下のことを行いました。
このプロジェクトでは、いくつかの重要な CSS 概念を紹介しました。
これらの概念は、JavaScript に依存せずに魅力的でインタラクティブなウェブインターフェイスを作成するための強力なツールです。これらの技術を適用して、シンプルな回転カードから複雑な 3D モデルまで、さまざまな 3D 要素を作成することができます。
このプロジェクトの拡張として、以下のことを検討することができます。
現代の CSS は視覚効果を作成するために非常に強力であり、以前は JavaScript が必要だった多くのアニメーションが今では CSS だけで実現できるようになっており、パフォーマンスが向上し、コードが簡素化されます。