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

Size: px

Start display at page:

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

まないざわ
7 years ago
Views:

1 応用 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

2 </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 に対応するタイムライン

3 -webkit-transform-origin: 100px 100px; animation: goroundanime 30s linear 0s infinite normal; -webkit-animation: goroundanime 30s linear 0s infinite normal; アニメーション名 goroundanime に対応するタイムラインを指定します 0% から 100% の間に transform: rotatex(720deg) rotatey(-360deg);x 軸の正方向から見て時計回りに 720 度まで回転させ Y 軸の正方向から見て反時計回りに 360 goroundanime { 0% { transform: rotatex(0deg) rotatey(0deg); 100% { transform: rotatex(720deg) 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

4 #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

5 #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);

6 #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

7 <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

8 フレームの 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

9 </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);

10 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

11 タイトルを <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

num6 の div 要素はつぎの順番で記述しそれぞれの div 要素の中にサイコロの目になる span 要素を記述します div 要素の id 属性の順番 span 要素の数 num3 3 num2 2 mun4 4 num5 5 num1 1 num6 6 <!

12 サイコロの 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

13 <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

14 を 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 goroundanime { 0% { transform: rotatex(0deg) rotatey(0deg); 100% { transform: rotatex(720deg) 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

15 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

16 #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

17 #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

18 #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

19 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

20 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 goroundanime { 0% { transform: rotatex(0deg) rotatey(0deg); 100% { transform: rotatex(720deg) 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

21 #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

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

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

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