</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

(1)

1342-7 応用１ Rotate 3D Cube

●3D Cube が回転するアニメーション

CSS3 で 3D の Cube を描いて回転させてみましょう。

【3DCubeAnime1 の説明】

〔HTML の記述（3DCubeAnime1.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 cube の div 要素を記述し、中に span 要素で 6 面に表示する数字を記述します。

サンプルＣＳＳ１

<!DOCTYPE html> <html> <head> <title>3DCubeAnime1</title> <meta charset="UTF-8">

(2)

〔CSS の記述（3DCubeAnime1.css）

〕

#stage ステージのスタイルを指定します。背景色を黒色で指定します。

画像に軽く遠近感を出すために perspective: 1000px;と指定し、perspective-origin: 50%

5%;と指定します。

3D Cube を描く起点となる#cube ボックスのスタイルを指定します。position は absolute、

位置は top: 150px; left: 150px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width と height は指定しないので大きさゼロのボックスになります。

子要素の span 要素を#cube とは別に３Ｄにして動かすので transform-style: preserve-3d;

と指定します。

3D Cube の回転の起点を６面体（１辺が 200px）の中心に配置するため transform-origin:

100px 100px;と指定します。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

#stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; } #cube { top: 150px; left: 150px; position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; </div> </div> </body> </html>

(3)

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。

0%から 100%の間に transform: rotateX(720deg) rotateY(-360deg);X 軸の正方向から見て

時計回りに 720 度まで回転させ、Y 軸の正方向から見て反時計回りに 360 度まで回転させま

す。

つぎに 3D Cube の６面体の指定をしますが、完成したイメージはこのようになります。

以下の span 要素のスタイルの指定内容と本図の６

面体の各面の色と数字を照らし合わせてみると 3D

Cube の作り方の理解がし易いと思います。

3D Cube の６面体になる#cube > span のスタイルを指定します。position は absolute、位

置は top: 0px; left: 0px;（#cube ボックスの左上端を起点とした位置）で指定します。

width は 200px、height は 200px で指定します。opacity: 0.8;で半透明にします。

６面体に表示する文字のスタイルを text-align: center;、font: bold 160px Verdana;、

line-height: 180px;で指定します。

@keyframes goRoundAnime {

0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(720deg) rotateY(-360deg); } }

@-webkit-keyframes goRoundAnime {

0% { -webkit-transform: rotateX(0deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(720deg) rotateY(-360deg); } }

-webkit-transform-origin: 100px 100px;

animation: goRoundAnime 30s linear 0s infinite normal;

-webkit-animation: goRoundAnime 30s linear 0s infinite normal; }

(4)

１つ目の span 要素（

「３」の面）のスタイルを指定します。背景色を background-color:

yellow;（黄色）

、文字色を color: red;（赤色）で指定します。

transform: rotateY(-0deg) translateZ(100px);で、面を Z 方向に 100px 奥へ移動した位

置に配置します。

２つ目の span 要素

（

「２」

の面）

のスタイルを指定します。

背景色を background-color: blue;

（青色）

、文字色を color: blueviolet;（赤紫色）で指定します。

transform: rotateY(-90deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計回

りに 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

３つ目の span 要素（

「４」の面）のスタイルを指定します。背景色を background-color:

orange;（オレンジ色）

、文字色を color: blue;（青色）で指定します。

transform: rotateY(-180deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計

回りに 180 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

#cube > span { top: 0px; left: 0px; width: 200px; height: 200px; position: absolute; opacity: 0.8; text-align: center; font: bold 160px Verdana; line-height: 180px; } #cube > span:nth-child(1) { background-color: yellow; color: red;

transform: rotateY(-0deg) translateZ(100px);

-webkit-transform: rotateY(-0deg) translateZ(100px); }

#cube > span:nth-child(2) { background-color: blue; color: blueviolet;

(5)

４つ目の span 要素（

「５」の面）のスタイルを指定します。背景色を background-color:

green;（緑色）

、文字色を color: orange;（オレンジ色）で指定します。

transform: rotateY(-270deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計

回りに 270 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

５つ目の span 要素（

「１」の面）のスタイルを指定します。背景色を background-color:

blueviolet;（青紫色）

、文字色を color: green;（緑色）で指定します。

transform: rotateX(90deg) translateZ(100px);で、面を X 軸の正方向から見て時計回り

に 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

６つ目の span 要素（

「６」の面）のスタイルを指定します。背景色を background-color: red;

（赤色）

、文字色を color: yellow;（黄色）で指定します。

transform: rotateX(90deg) rotateY(180deg) translateZ(100px);で、面を X 軸の正方向

から見て時計回りに 90 度回転させ、Y 軸の正方向から見て時計回りに 180 度回転させ、Z

方向に 100px 奥へ移動した位置に配置します。（注：Y 軸の正方向から見て時計回りに 180

度回転させるのは、

「６」の面を６面体の外から見た時に文字が左右逆になるのを補正する

ためです。

）

#cube > span:nth-child(3) { background-color: orange; color: blue;

#cube > span:nth-child(4) { background-color: green; color: orange;

#cube > span:nth-child(5) { background-color: blueviolet; color: green;

transform: rotateX(90deg) translateZ(100px);

-webkit-transform: rotateX(90deg) translateZ(100px); }

(6)

●丸い面の 3D Cube が回転するアニメーション

丸い面の 3D Cube を描いて回転させてみましょう。

【3DCubeAnime2 の説明】

〔HTML の記述（3DCubeAnime2.html）

〕

ベースは 3DCubeAnime1.html なので、違う部分だけ説明します。

タイトルを <title>3DCubeAnime2</title> にします。スタイルシートの指定を <link

rel="stylesheet" type="text/css" href="3DCubeAnime2.css">にします。

#cube > span:nth-child(6) { background-color: red; color: yellow;

transform: rotateX(90deg) rotateY(180deg) translateZ(100px);

-webkit-transform: rotateX(90deg) rotateY(180deg) translateZ(100px); }

サンプルＣＳＳ２

<!DOCTYPE html> <html> <head> <title>3DCubeAnime2</title>

(7)

〔CSS の記述（3DCubeAnime2.css）

〕

3DCubeAnime1.css と違う部分だけ説明します。

3D Cube の６面体になる#cube > span のスタイルに border-radius: 50%;を追加して面を円

形にします。

上記以外の項目は 3DCubeAnime1.css と同じです。

#cube > span { top: 0px; left: 0px; width: 200px; height: 200px; border-radius: 50%; position: absolute; opacity: 0.8; text-align: center; font: bold 160px Verdana; line-height: 180px; }

(8)

●フレームの 3D Cube が回転するアニメーション

フレームの 3D Cube を描いて回転させてみましょう。

【RotateCubeFrame1 の説明】

〔HTML の記述（RotateCubeFrame1.html）

〕

ベースは 3DCubeAnime1.html なので、違う部分だけ説明します。

タイトルを<title>RotateCubeFrame1</title>にします。スタイルシートの指定を<link

rel="stylesheet" type="text/css" href="RotateCubeFrame1.css">にします。

サンプルＣＳＳ３

<!DOCTYPE html> <html> <head> <title>RotateCubeFrame1</title> <meta charset="UTF-8">

(9)

〔CSS の記述（RotateCubeFrame1.css）

〕

3DCubeAnime1.css と違う部分だけ説明します。

3D Cube の６面体になる#cube > span のスタイルの次の項目を追加変更します。width と

height を 196px にします。border を border: solid 2px gray;にします。

#cube > span:nth-child(1)から#cube > span:nth-child(6)の背景色 background-color の

指定はしません。

#cube > span {

top: 0px; left: 0px;

width: 196px; height: 196px; border: solid 2px gray; position: absolute;

text-align: center; font: bold 160px Verdana; line-height: 180px; }

#cube > span:nth-child(1) { color: red;

#cube > span:nth-child(2) { color: blueviolet;

#cube > span:nth-child(3) { color: blue;

-webkit-transform: rotateY(-180deg) translateZ(100px); } #cube > span:nth-child(4) { color: orange; </div> </body> </html>

(10)

上記以外の項目は 3DCubeAnime1.css と同じです。

●丸い面のフレームの 3D Cube が回転するアニメーション

丸い面のフレームの 3D Cube を描いて回転させてみましょう。

【RotateCubeFrame2 の説明】

〔HTML の記述（RotateCubeFrame2.html）

〕

ベースは RotateCubeFrame1.html なので、違う部分だけ説明します。

#cube > span:nth-child(5) { color: green;

#cube > span:nth-child(6) { color: yellow;

(11)

タイトルを<title>RotateCubeFrame2</title>にします。スタイルシートの指定を<link

rel="stylesheet" type="text/css" href="RotateCubeFrame2.css">にします。

〔CSS の記述（RotateCubeFrame2.css）

〕

RotateCubeFrame1.css と違う部分だけ説明します。

3D Cube の６面体になる#cube > span のスタイルに border-radius: 50%;を追加して面を円

形にします。

上記以外の項目は RotateCubeFrame1.css と同じです。

#cube > span {

width: 196px; height: 196px; border: solid 2px gray; border-radius: 50%; position: absolute;

text-align: center; font: bold 160px Verdana; line-height: 180px; } <!DOCTYPE html> <html> <head> <title>RotateCubeFrame2</title> <meta charset="UTF-8">

(12)

●サイコロの 3D Cube が回転するアニメーション

サイコロの 3D の Cube を描いて回転させてみましょう。

【RotateCubeDice の説明】

〔HTML の記述（RotateCubeDice.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 cube の div 要素を記述し、中に６面になる id 属性 num1 から num6 の div 要素を記

述します。id 属性 num1 から num6 の div 要素はつぎの順番で記述し、それぞれの div 要素

の中にサイコロの目になる span 要素を記述します。

〔div 要素の id 属性の順番〕〔span 要素の数〕

num3 ３

num2 ２

mun4 ４

num5 ５

num1 １

num6 ６

サンプルＣＳＳ５

<!DOCTYPE html> <html> <head> <title>RotateCubeDice</title> <meta charset="UTF-8">

(13)

〔CSS の記述（RotateCubeDice.css）

〕

#stage ステージのスタイルを指定します。背景色を黒色で指定します。

画像に軽く遠近感を出すために perspective: 1000px;と指定し、perspective-origin: 50%

5%;と指定します。

3D Cube を描く起点となる#cube ボックスのスタイルを指定します。position は absolute、

位置は top: 150px; left: 150px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width と height は指定しないので大きさゼロのボックスになります。

子要素の span 要素を#cube とは別に３Ｄにして動かすので transform-style: preserve-3d;

と指定します。

3D Cube の回転の起点を６面体（１辺が 200px）の中心に配置するため transform-origin:

100px 100px;と指定します。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

#stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; } <body> <p>■3D Cube（サイコロ）を描いて回転させる。</p> <div id="stage"> <div id="cube"> <div id="num3"><span></span><span></span><span></span></div> <div id="num2"><span></span><span></span></div> <div id="num4"><span></span><span></span><span></span><span></span></div> <div id="num5"><span></span><span></span><span></span><span></span><span></span></div> <div id="num1"><span></span></div> <div id="num6"><span></span><span></span><span></span><span></span><span></span><span></spa n></div> </div> </div> </body> </html>

(14)

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。

0%から 100%の間に transform: rotateX(720deg) rotateY(-360deg);X 軸の正方向から見て

時計回りに 720 度まで回転させ、Y 軸の正方向から見て反時計回りに 360 度まで回転させま

す。

3D Cube の６面体になる#cube div のスタイルを指定します。position は absolute、位置

は top: 0px left: 0px;（#cube ボックスの左上端を起点とした位置）で指定します。width

は 198px、height は 198px で指定します。ボーダーを border: solid 1px gray;（灰色）で

指定します。背景色を background-color: #FFFFDD;（クリーム色）で指定します。

サイコロの目の共通仕様を指定します。#num1 span（大きな赤丸）と #num2 span から#num6

#cube { top: 150px; left: 150px; position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; -webkit-transform-origin: 100px 100px;

#cube div {

width: 198px; height: 198px; border: solid 1px gray; background-color: #FFFFDD; position: absolute; }

(15)

span まで（小さな黒丸）を分けて指定します。

#cube #num3（

「３の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num3 は transform: rotateY(-0deg) translateZ(100px);で、面を Z 方向に 100px

奥へ移動した位置に配置します。span 要素は面上の位置を指定します。

#cube #num2（

「２の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num2 は transform: rotateY(-90deg) translateZ(100px);で、面を Y 軸の正方向か

ら見て反時計回りに 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。span

要素は面上の位置を指定します。

/* Number 3 *********************************************************/ #cube #num3 {

#cube #num3 > span:nth-child(1) { top: 30px; left: 30px;

}

#cube #num3 > span:nth-child(3) { top: 130px; left: 130px; }

/* Number 2 *********************************************************/ #cube #num2 {

-webkit-transform: rotateY(-90deg) translateZ(100px); } #num1 span { width: 80px; height: 80px; border-radius: 50%; background-color: red; position: absolute; }

#num2 span, #num3 span, #num4 span, #num5 span, #num6 span { width: 40px; height: 40px;

border-radius: 50%; background-color: black; position: absolute; }

(16)

#cube #num4（

「４の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num4 は transform: rotateY(-180deg) translateZ(100px);で、面を Y 軸の正方向

から見て反時計回りに 180 度回転させ、

Z 方向に 100px 奥へ移動した位置に配置します。span

要素は面上の位置を指定します。

#cube #num5（

「５の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num5 は transform: rotateY(-270deg) translateZ(100px);で、面を Y 軸の正方向

から見て反時計回りに 270 度回転させ、

Z 方向に 100px 奥へ移動した位置に配置します。span

要素は面上の位置を指定します。

/* Number 4 *********************************************************/ #cube #num4 {

}

/* Number 5 *********************************************************/ #cube #num5 {

}

(17)

#cube #num1（

「１の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num1 は transform: rotateX(90deg) translateZ(100px);で、面を X 軸の正方向か

ら見て時計回りに 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。span 要

素は面上の位置を指定します。

#cube #num6（

「６の目」の面）と目の黒丸になる span 要素のスタイルを指定します。

#cube #num6 は transform: rotateX(90deg) rotateY(180deg) translateZ(100px);で、面

を X 軸の正方向から見て時計回りに 90 度回転させ、Y 軸の正方向から見て時計回りに 180

度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

（注：Y 軸の正方向から見て

時計回りに 180 度回転させるのは、

「６」の面を６面体の外から見た時に左右逆になるのを

補正するためです。

）span 要素は面上の位置を指定します。

/* Number 1 *********************************************************/ #cube #num1 {

}

/* Number 6 *********************************************************/ #cube #num6 {

}

(18)

●画像の 3D Cube が回転するアニメーション

画像の 3D の Cube を描いて回転させてみましょう。

#cube #num6 > span:nth-child(2) {

top: 30px; left: 80px; }

}

(19)

【RotateCubePic の説明】

〔HTML の記述（RotateCubePic.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 cube の div 要素を記述し、中に６面体になる span 要素及びその中に画像を指定し

ます。画像は縦 200px、横 200px の画像を使用します。

〔CSS の記述（RotateCubePic.css）

〕

#stage ステージのスタイルを指定します。背景色を黒色で指定します。

画像に軽く遠近感を出すために perspective: 1000px;と指定し、perspective-origin: 50%

5%;と指定します。

<!DOCTYPE html> <html> <head> <title>RotateCubePic</title> <meta charset="UTF-8">

<body>

<p>■3D Cube（画像）を描いて回転させる。</p> <div id="stage">

<span><img src="images/DSC00189 sq200px.jpg" alt="Flying carps"></span> <span><img src="images/DSC00027 sq200px.jpg" alt="Wall paint"></span> <span><img src="images/DSC00203 sq200px.jpg" alt="Green load"></span> <span><img src="images/DSC00131 sq200px.jpg" alt="Water fall"></span> <span><img src="images/DSC00007 sq200px.jpg" alt="Red leaves"></span> <span><img src="images/DSC00095 sq200px.jpg" alt="Cherry blossoms"></span> </div> </div> </body> </html> #stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; }

(20)

3D Cube を描く起点となる#cube ボックスのスタイルを指定します。position は absolute、

位置は top: 150px; left: 150px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width と height は指定しないので大きさゼロのボックスになります。

子要素の span 要素を#cube とは別に３Ｄにして動かすので transform-style: preserve-3d;

と指定します。

3D Cube の回転の起点を６面体（１辺が 200px）の中心に配置するため transform-origin:

100px 100px;と指定します。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。

0%から 100%の間に transform: rotateX(720deg) rotateY(-360deg);X 軸の正方向から見て

時計回りに 720 度まで回転させ、Y 軸の正方向から見て反時計回りに 360 度まで回転させま

す。

3D Cube の６面体になる#cube > span のスタイルを指定します。position は absolute、位

置は top: 0px; left: 0px;（#cube ボックスの左上端を起点とした位置）で指定します。

width は 200px、height は 200px で指定します。ボーダーを border: solid 1px #666666;

（灰色）で指定します。

#cube { top: 150px; left: 150px; position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; -webkit-transform-origin: 100px 100px;

(21)

１つ目から６つ目の span 要素のスタイルを指定します。

各 span 要素に貼りつける画像のサイズを指定します。

#cube > span { top: 0px; left: 0px; width: 200px; height: 200px; border: solid 1px #666666; position: absolute; } #cube > span:nth-child(1) {

#cube > span:nth-child(2) {

#cube span img {

width: 100%; height: 100%; }

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

1342-7 応用１ Rotate 3D Cube

●3D Cube が回転するアニメーション

CSS3 で 3D の Cube を描いて回転させてみましょう。

【3DCubeAnime1 の説明】

〔HTML の記述（3DCubeAnime1.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 cube の div 要素を記述し、中に span 要素で 6 面に表示する数字を記述します。

サンプルＣＳＳ１

〔CSS の記述（3DCubeAnime1.css）

〕

#stage ステージのスタイルを指定します。背景色を黒色で指定します。

画像に軽く遠近感を出すために perspective: 1000px;と指定し、perspective-origin: 50%

5%;と指定します。

3D Cube を描く起点となる#cube ボックスのスタイルを指定します。position は absolute、

位置は top: 150px; left: 150px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width と height は指定しないので大きさゼロのボックスになります。

子要素の span 要素を#cube とは別に３Ｄにして動かすので transform-style: preserve-3d;

と指定します。

3D Cube の回転の起点を６面体（１辺が 200px）の中心に配置するため transform-origin:

100px 100px;と指定します。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。

0%から 100%の間に transform: rotateX(720deg) rotateY(-360deg);X 軸の正方向から見て

時計回りに 720 度まで回転させ、Y 軸の正方向から見て反時計回りに 360 度まで回転させま

す。

つぎに 3D Cube の６面体の指定をしますが、完成したイメージはこのようになります。

以下の span 要素のスタイルの指定内容と本図の６

面体の各面の色と数字を照らし合わせてみると 3D

Cube の作り方の理解がし易いと思います。

3D Cube の６面体になる#cube > span のスタイルを指定します。position は absolute、位

置は top: 0px; left: 0px;（#cube ボックスの左上端を起点とした位置）で指定します。

width は 200px、height は 200px で指定します。opacity: 0.8;で半透明にします。

６面体に表示する文字のスタイルを text-align: center;、font: bold 160px Verdana;、

line-height: 180px;で指定します。

１つ目の span 要素（

「３」の面）のスタイルを指定します。背景色を background-color:

yellow;（黄色）

、文字色を color: red;（赤色）で指定します。

transform: rotateY(-0deg) translateZ(100px);で、面を Z 方向に 100px 奥へ移動した位

置に配置します。

２つ目の span 要素

（

「２」

の面）

のスタイルを指定します。

背景色を background-color: blue;

（青色）

、文字色を color: blueviolet;（赤紫色）で指定します。

transform: rotateY(-90deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計回

りに 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

３つ目の span 要素（

「４」の面）のスタイルを指定します。背景色を background-color:

orange;（オレンジ色）

、文字色を color: blue;（青色）で指定します。

transform: rotateY(-180deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計

回りに 180 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

４つ目の span 要素（

「５」の面）のスタイルを指定します。背景色を background-color:

green;（緑色）

、文字色を color: orange;（オレンジ色）で指定します。

transform: rotateY(-270deg) translateZ(100px);で、面を Y 軸の正方向から見て反時計

回りに 270 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

５つ目の span 要素（

「１」の面）のスタイルを指定します。背景色を background-color:

blueviolet;（青紫色）

、文字色を color: green;（緑色）で指定します。

transform: rotateX(90deg) translateZ(100px);で、面を X 軸の正方向から見て時計回り

に 90 度回転させ、Z 方向に 100px 奥へ移動した位置に配置します。

６つ目の span 要素（

「６」の面）のスタイルを指定します。背景色を background-color: red;

（赤色）

、文字色を color: yellow;（黄色）で指定します。

transform: rotateX(90deg) rotateY(180deg) translateZ(100px);で、面を X 軸の正方向

から見て時計回りに 90 度回転させ、Y 軸の正方向から見て時計回りに 180 度回転させ、Z

方向に 100px 奥へ移動した位置に配置します。（注：Y 軸の正方向から見て時計回りに 180

度回転させるのは、

「６」の面を６面体の外から見た時に文字が左右逆になるのを補正する

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

タイトルを <title>3DCubeAnime2</title> にします。スタイルシートの指定を <link

〔div 要素の id 属性の順番〕〔span 要素の数〕