1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 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"> <link rel="stylesheet" type="text/css" href="3dcubeanime1.css"> </head> <body> <p> 3D Cube を描いて回転させる </p> <div id="stage"> <div id="cube"> <span>3</span> <span>2</span> <span>4</span> <span>5</span> <span>1</span> <span>6</span> 1
</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-origin: 50% 5%; と指定します #stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; 3D Cube を描く起点となる #cube ボックスのスタイルを指定します position は absolute 位置は top: 150px; left: 150px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります 子要素の span 要素を #cube とは別に3Dにして動かすので transform-style: preserve-3d; と指定します 3D Cube の回転の起点を6 面体 (1 辺が 200px) の中心に配置するため transform-origin: 100px 100px; と指定します アニメーション名を goroundanime 実行時間を 30s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #cube { top: 150px; left: 150px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; 2
-webkit-transform-origin: 100px 100px; animation: goroundanime 30s linear 0s infinite normal; -webkit-animation: goroundanime 30s linear 0s infinite normal; アニメーション名 goroundanime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatex(720deg) rotatey(-360deg);x 軸の正方向から見て時計回りに 720 度まで回転させ Y 軸の正方向から見て反時計回りに 360 度まで回転させます @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); つぎに 3D Cube の 6 面体の指定をしますが 完成したイメージはこのようになります 以下の span 要素のスタイルの指定内容と本図の 6 面体の各面の色と数字を照らし合わせてみると 3D Cube の作り方の理解がし易いと思います 3D Cube の 6 面体になる #cube > span のスタイルを指定します position は absolute 位 置は top: 0px; left: 0px;(#cube ボックスの左上端を起点とした位置 ) で指定します width は 200px height は 200px で指定します opacity: 0.8; で半透明にします 6 面体に表示する文字のスタイルを text-align: center; font: bold 160px Verdana; line-height: 180px; で指定します 3
#cube > span { top: 0px; left: 0px; width: 200px; height: 200px; opacity: 0.8; text-align: center; font: bold 160px Verdana; line-height: 180px; 1つ目の span 要素 ( 3 の面) のスタイルを指定します 背景色を background-color: yellow;( 黄色 ) 文字色を color: red;( 赤色 ) で指定します transform: rotatey(-0deg) translatez(100px); で 面を Z 方向に 100px 奥へ移動した位置に配置します #cube > span:nth-child(1) { background-color: yellow; color: red; transform: rotatey(-0deg) translatez(100px); -webkit-transform: rotatey(-0deg) translatez(100px); 2つ目の span 要素 ( 2 の面) のスタイルを指定します 背景色を background-color: blue; ( 青色 ) 文字色を color: blueviolet;( 赤紫色 ) で指定します transform: rotatey(-90deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 90 度回転させ Z 方向に 100px 奥へ移動した位置に配置します #cube > span:nth-child(2) { background-color: blue; color: blueviolet; transform: rotatey(-90deg) translatez(100px); -webkit-transform: rotatey(-90deg) translatez(100px); 3つ目の span 要素 ( 4 の面) のスタイルを指定します 背景色を background-color: orange;( オレンジ色 ) 文字色を color: blue;( 青色 ) で指定します transform: rotatey(-180deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 180 度回転させ Z 方向に 100px 奥へ移動した位置に配置します 4
#cube > span:nth-child(3) { background-color: orange; color: blue; transform: rotatey(-180deg) translatez(100px); -webkit-transform: rotatey(-180deg) translatez(100px); 4つ目の span 要素 ( 5 の面) のスタイルを指定します 背景色を background-color: green;( 緑色 ) 文字色を color: orange;( オレンジ色 ) で指定します transform: rotatey(-270deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 270 度回転させ Z 方向に 100px 奥へ移動した位置に配置します #cube > span:nth-child(4) { background-color: green; color: orange; transform: rotatey(-270deg) translatez(100px); -webkit-transform: rotatey(-270deg) translatez(100px); 5つ目の span 要素 ( 1 の面) のスタイルを指定します 背景色を background-color: blueviolet;( 青紫色 ) 文字色を color: green;( 緑色 ) で指定します transform: rotatex(90deg) translatez(100px); で 面を X 軸の正方向から見て時計回りに 90 度回転させ Z 方向に 100px 奥へ移動した位置に配置します #cube > span:nth-child(5) { background-color: blueviolet; color: green; transform: rotatex(90deg) translatez(100px); -webkit-transform: rotatex(90deg) translatez(100px); 6 つ目の span 要素 ( 6 の面 ) のスタイルを指定します 背景色を background-color: red; ( 赤色 ) 文字色を color: yellow;( 黄色 ) で指定します transform: rotatex(90deg) rotatey(180deg) translatez(100px); で 面を X 軸の正方向 から見て時計回りに 90 度回転させ Y 軸の正方向から見て時計回りに 180 度回転させ Z 方向に 100px 奥へ移動した位置に配置します ( 注 :Y 軸の正方向から見て時計回りに 180 度回転させるのは 6 の面を 6 面体の外から見た時に文字が左右逆になるのを補正する ためです ) 5
#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); 丸い面の 3D Cube が回転するアニメーション サンプル CSS2 丸い面の 3D Cube を描いて回転させてみましょう 3DCubeAnime2 の説明 HTML の記述 (3DCubeAnime2.html) ベースは 3DCubeAnime1.html なので 違う部分だけ説明します タイトルを <title>3dcubeanime2</title> にします スタイルシートの指定を <link rel="stylesheet" type="text/css" href="3dcubeanime2.css"> にします <!DOCTYPE html> <html> <head> <title>3dcubeanime2</title> 6
<meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="3dcubeanime2.css"> </head> <body> <p> 3D Cube を描いて回転させる </p> <div id="stage"> <div id="cube"> <span>3</span> <span>2</span> <span>4</span> <span>5</span> <span>1</span> <span>6</span> </div> </div> </body> </html> CSS の記述 (3DCubeAnime2.css) 3DCubeAnime1.css と違う部分だけ説明します 3D Cube の6 面体になる #cube > span のスタイルに border-radius: 50%; を追加して面を円形にします #cube > span { top: 0px; left: 0px; width: 200px; height: 200px; border-radius: 50%; opacity: 0.8; text-align: center; font: bold 160px Verdana; line-height: 180px; 上記以外の項目は 3DCubeAnime1.css と同じです 7
フレームの 3D Cube が回転するアニメーション サンプル CSS3 フレームの 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"> <link rel="stylesheet" type="text/css" href="rotatecubeframe1.css"> </head> <body> <p> 3D Cube( フレーム ) を描いて回転させる </p> <div id="stage"> <div id="cube"> <span>3</span> <span>2</span> <span>4</span> <span>5</span> <span>1</span> <span>6</span> </div> 8
</div> </body> </html> CSS の記述 (RotateCubeFrame1.css) 3DCubeAnime1.css と違う部分だけ説明します 3D Cube の6 面体になる #cube > span のスタイルの次の項目を追加変更します width と height を 196px にします border を border: solid 2px gray; にします #cube > span { top: 0px; left: 0px; width: 196px; height: 196px; border: solid 2px gray; text-align: center; font: bold 160px Verdana; line-height: 180px; #cube > span:nth-child(1) から #cube > span:nth-child(6) の背景色 background-color の 指定はしません #cube > span:nth-child(1) { color: red; transform: rotatey(-0deg) translatez(100px); -webkit-transform: rotatey(-0deg) translatez(100px); #cube > span:nth-child(2) { color: blueviolet; transform: rotatey(-90deg) translatez(100px); -webkit-transform: rotatey(-90deg) translatez(100px); #cube > span:nth-child(3) { color: blue; transform: rotatey(-180deg) translatez(100px); -webkit-transform: rotatey(-180deg) translatez(100px); #cube > span:nth-child(4) { color: orange; 9
transform: rotatey(-270deg) translatez(100px); -webkit-transform: rotatey(-270deg) translatez(100px); #cube > span:nth-child(5) { color: green; transform: rotatex(90deg) translatez(100px); -webkit-transform: rotatex(90deg) translatez(100px); #cube > span:nth-child(6) { color: yellow; transform: rotatex(90deg) rotatey(180deg) translatez(100px); -webkit-transform: rotatex(90deg) rotatey(180deg) translatez(100px); 上記以外の項目は 3DCubeAnime1.css と同じです 丸い面のフレームの 3D Cube が回転するアニメーション サンプル CSS4 丸い面のフレームの 3D Cube を描いて回転させてみましょう RotateCubeFrame2 の説明 HTML の記述 (RotateCubeFrame2.html) ベースは RotateCubeFrame1.html なので 違う部分だけ説明します 10
タイトルを <title>rotatecubeframe2</title> にします スタイルシートの指定を <link rel="stylesheet" type="text/css" href="rotatecubeframe2.css"> にします <!DOCTYPE html> <html> <head> <title>rotatecubeframe2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rotatecubeframe2.css"> </head> <body> <p> 3D Cube( フレーム ) を描いて回転させる </p> <div id="stage"> <div id="cube"> <span>3</span> <span>2</span> <span>4</span> <span>5</span> <span>1</span> <span>6</span> </div> </div> </body> </html> CSS の記述 (RotateCubeFrame2.css) RotateCubeFrame1.css と違う部分だけ説明します 3D Cube の6 面体になる #cube > span のスタイルに border-radius: 50%; を追加して面を円形にします #cube > span { top: 0px; left: 0px; width: 196px; height: 196px; border: solid 2px gray; border-radius: 50%; text-align: center; font: bold 160px Verdana; line-height: 180px; 上記以外の項目は RotateCubeFrame1.css と同じです 11
サイコロの 3D Cube が回転するアニメーション サンプル CSS5 サイコロの 3D の Cube を描いて回転させてみましょう RotateCubeDice の説明 HTML の記述 (RotateCubeDice.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し 中に6 面になる id 属性 num1 から num6 の div 要素を記述します id 属性 num1 から num6 の div 要素はつぎの順番で記述し それぞれの div 要素の中にサイコロの目になる span 要素を記述します div 要素の id 属性の順番 span 要素の数 num3 3 num2 2 mun4 4 num5 5 num1 1 num6 6 <!DOCTYPE html> <html> <head> <title>rotatecubedice</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rotatecubedice.css"> </head> 12
<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> CSS の記述 (RotateCubeDice.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-origin: 50% 5%; と指定します #stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; 3D Cube を描く起点となる #cube ボックスのスタイルを指定します position は absolute 位置は top: 150px; left: 150px;(#stage ボックスの左上端を起点とした位置 ) で指定し ます width と height は指定しないので大きさゼロのボックスになります 子要素の span 要素を #cube とは別に 3D にして動かすので transform-style: preserve-3d; と指定します 3D Cube の回転の起点を 6 面体 (1 辺が 200px) の中心に配置するため transform-origin: 100px 100px; と指定します アニメーション名を goroundanime 実行時間を 30s イージングを linear 開始待ち時間 13
を 0s 繰り返しを infinite 実行方向は normal で指定します #cube { top: 150px; left: 150px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; -webkit-transform-origin: 100px 100px; animation: goroundanime 30s linear 0s infinite normal; -webkit-animation: goroundanime 30s linear 0s infinite normal; アニメーション名 goroundanime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatex(720deg) rotatey(-360deg);x 軸の正方向から見て時計回りに 720 度まで回転させ Y 軸の正方向から見て反時計回りに 360 度まで回転させます @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); 3D Cube の6 面体になる #cube div のスタイルを指定します position は absolute 位置は top: 0px left: 0px;(#cube ボックスの左上端を起点とした位置 ) で指定します width は 198px height は 198px で指定します ボーダーを border: solid 1px gray;( 灰色 ) で指定します 背景色を background-color: #FFFFDD;( クリーム色 ) で指定します #cube div { top: 0px; left: 0px; width: 198px; height: 198px; border: solid 1px gray; background-color: #FFFFDD; サイコロの目の共通仕様を指定します #num1 span( 大きな赤丸 ) と #num2 span から #num6 14
span まで ( 小さな黒丸 ) を分けて指定します #num1 span { width: 80px; height: 80px; border-radius: 50%; background-color: red; #num2 span, #num3 span, #num4 span, #num5 span, #num6 span { width: 40px; height: 40px; border-radius: 50%; background-color: black; #cube #num3( 3 の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num3 は transform: rotatey(-0deg) translatez(100px); で 面を Z 方向に 100px 奥へ移動した位置に配置します span 要素は面上の位置を指定します /* Number 3 *********************************************************/ #cube #num3 { transform: rotatey(-0deg) translatez(100px); -webkit-transform: rotatey(-0deg) translatez(100px); #cube #num3 > span:nth-child(1) { top: 30px; left: 30px; #cube #num3 > span:nth-child(2) { top: 80px; left: 80px; #cube #num3 > span:nth-child(3) { top: 130px; left: 130px; #cube #num2( 2の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num2 は transform: rotatey(-90deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 90 度回転させ Z 方向に 100px 奥へ移動した位置に配置します span 要素は面上の位置を指定します /* Number 2 *********************************************************/ #cube #num2 { transform: rotatey(-90deg) translatez(100px); -webkit-transform: rotatey(-90deg) translatez(100px); 15
#cube #num2 > span:nth-child(1) { top: 40px; left: 40px; #cube #num2 > span:nth-child(2) { top: 120px; left: 120px; #cube #num4( 4の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num4 は transform: rotatey(-180deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 180 度回転させ Z 方向に 100px 奥へ移動した位置に配置します span 要素は面上の位置を指定します /* Number 4 *********************************************************/ #cube #num4 { transform: rotatey(-180deg) translatez(100px); -webkit-transform: rotatey(-180deg) translatez(100px); #cube #num4 > span:nth-child(1) { top: 30px; left: 30px; #cube #num4 > span:nth-child(2) { top: 30px; left: 130px; #cube #num4 > span:nth-child(3) { top: 130px; left: 30px; #cube #num4 > span:nth-child(4) { top: 130px; left: 130px; #cube #num5( 5の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num5 は transform: rotatey(-270deg) translatez(100px); で 面を Y 軸の正方向から見て反時計回りに 270 度回転させ Z 方向に 100px 奥へ移動した位置に配置します span 要素は面上の位置を指定します /* Number 5 *********************************************************/ #cube #num5 { transform: rotatey(-270deg) translatez(100px); -webkit-transform: rotatey(-270deg) translatez(100px); #cube #num5 > span:nth-child(1) { top: 30px; left: 30px; 16
#cube #num5 > span:nth-child(2) { top: 30px; left: 130px; #cube #num5 > span:nth-child(3) { top: 80px; left: 80px; #cube #num5 > span:nth-child(4) { top: 130px; left: 30px; #cube #num5 > span:nth-child(5) { top: 130px; left: 130px; #cube #num1( 1の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num1 は transform: rotatex(90deg) translatez(100px); で 面を X 軸の正方向から見て時計回りに 90 度回転させ Z 方向に 100px 奥へ移動した位置に配置します span 要素は面上の位置を指定します /* Number 1 *********************************************************/ #cube #num1 { transform: rotatex(90deg) translatez(100px); -webkit-transform: rotatex(90deg) translatez(100px); #cube #num1 > span:nth-child(1) { top: 60px; left: 60px; #cube #num6( 6の目 の面 ) と目の黒丸になる span 要素のスタイルを指定します #cube #num6 は transform: rotatex(90deg) rotatey(180deg) translatez(100px); で 面を X 軸の正方向から見て時計回りに 90 度回転させ Y 軸の正方向から見て時計回りに 180 度回転させ Z 方向に 100px 奥へ移動した位置に配置します ( 注 :Y 軸の正方向から見て時計回りに 180 度回転させるのは 6 の面を6 面体の外から見た時に左右逆になるのを補正するためです )span 要素は面上の位置を指定します /* Number 6 *********************************************************/ #cube #num6 { transform: rotatex(90deg) rotatey(180deg) translatez(100px); -webkit-transform: rotatex(90deg) rotatey(180deg) translatez(100px); #cube #num6 > span:nth-child(1) { top: 30px; left: 30px; 17
#cube #num6 > span:nth-child(2) { top: 30px; left: 80px; #cube #num6 > span:nth-child(3) { top: 30px; left: 130px; #cube #num6 > span:nth-child(4) { top: 130px; left: 30px; #cube #num6 > span:nth-child(5) { top: 130px; left: 80px; #cube #num6 > span:nth-child(6) { top: 130px; left: 130px; 画像の 3D Cube が回転するアニメーション サンプル CSS6 画像の 3D の Cube を描いて回転させてみましょう 18
RotateCubePic の説明 HTML の記述 (RotateCubePic.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し 中に6 面体になる span 要素及びその中に画像を指定します 画像は縦 200px 横 200px の画像を使用します <!DOCTYPE html> <html> <head> <title>rotatecubepic</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rotatecubepic.css"> </head> <body> <p> 3D Cube( 画像 ) を描いて回転させる </p> <div id="stage"> <div id="cube"> <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> CSS の記述 (RotateCubePic.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-origin: 50% 5%; と指定します #stage { width: 500px; height: 500px; background-color: black; position: relative; perspective: 1000px; -webkit-perspective: 1000px; perspective-origin: 50% 5%; -webkit-perspective-origin: 50% 5%; 19
3D Cube を描く起点となる #cube ボックスのスタイルを指定します position は absolute 位置は top: 150px; left: 150px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります 子要素の span 要素を #cube とは別に3Dにして動かすので transform-style: preserve-3d; と指定します 3D Cube の回転の起点を6 面体 (1 辺が 200px) の中心に配置するため transform-origin: 100px 100px; と指定します アニメーション名を goroundanime 実行時間を 30s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #cube { top: 150px; left: 150px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 100px 100px; -webkit-transform-origin: 100px 100px; animation: goroundanime 30s linear 0s infinite normal; -webkit-animation: goroundanime 30s linear 0s infinite normal; アニメーション名 goroundanime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatex(720deg) rotatey(-360deg);x 軸の正方向から見て時計回りに 720 度まで回転させ Y 軸の正方向から見て反時計回りに 360 度まで回転させます @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); 3D Cube の 6 面体になる #cube > span のスタイルを指定します position は absolute 位 置は top: 0px; left: 0px;(#cube ボックスの左上端を起点とした位置 ) で指定します width は 200px height は 200px で指定します ボーダーを border: solid 1px #666666; ( 灰色 ) で指定します 20
#cube > span { top: 0px; left: 0px; width: 200px; height: 200px; border: solid 1px #666666; 1 つ目から 6 つ目の span 要素のスタイルを指定します #cube > span:nth-child(1) { transform: rotatey(-0deg) translatez(100px); -webkit-transform: rotatey(-0deg) translatez(100px); #cube > span:nth-child(2) { transform: rotatey(-90deg) translatez(100px); -webkit-transform: rotatey(-90deg) translatez(100px); #cube > span:nth-child(3) { transform: rotatey(-180deg) translatez(100px); -webkit-transform: rotatey(-180deg) translatez(100px); #cube > span:nth-child(4) { transform: rotatey(-270deg) translatez(100px); -webkit-transform: rotatey(-270deg) translatez(100px); #cube > span:nth-child(5) { transform: rotatex(90deg) translatez(100px); -webkit-transform: rotatex(90deg) translatez(100px); #cube > span:nth-child(6) { transform: rotatex(90deg) rotatey(180deg) translatez(100px); -webkit-transform: rotatex(90deg) rotatey(180deg) translatez(100px); 各 span 要素に貼りつける画像のサイズを指定します #cube span img { width: 100%; height: 100%; 21