1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1
画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示されなくなります 下の画像 ( 黄緑色の外枠に白い桜 ) と 上の画像 ( 水色の外枠に紅葉 ) の外枠だけ反転させた状態では 上の画像の外枠だけが表示されなくなります ( これは下の画像の裏側の外枠 ( 黄緑色 ) と上の画像の内側 ( 紅葉の画像 ) がこちら側を向いている状態になります ) 下の画像 ( 黄緑色の外枠に白い桜 ) と 上の画像 ( 水色の外枠に紅葉 ) の内側 ( 紅葉の画像 ) だけ反転させた状態では 上の画像の内側の画像だけが表示されなくなります ( これは下の画像の内側の画像 ( 白い桜 ) と上の画像の外枠 ( 水色 ) がこちら側を向いている状態になります ) BackfaceVisibilityAnime5 の説明 HTML の記述 (BackfaceVisibilityAnime5.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 wrap の div 要素 ( グレーの背景 ) を記述し 中につぎの記述をします まず裏面の要素を指定します ( 表面より必ず先に記述します ) id 属性 rect1-back の div 要素を記述し 中につぎの記述をします id 属性 rect2-back の div 要素を記述し 中に白 い桜の画像 images/dsc00095m_flip_h.jpg を指定します ( 注意 : 横に回転させる裏面なの で 画像の左右を反転させた画像を使います ) つぎに表面の要素を指定します id 属性 rect1-front の div 要素を記述し 中につぎの記 述をします id 属性 rect2-front の div 要素を記述し 中に紅葉の画像 images/dsc00007m.jpg を指定します ( 注意 : 表面の画像は左右を反転させた画像を使う必 2
要はありません ) <!DOCTYPE html> <html> <head> <title>backfacevisibilityanime5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="backfacevisibilityanime5.css"> </head> <body> <p> backface-visibility を使ったアニメーション </p> <div id="stage"> <div id="wrap"> <!-- back side, front side の順で記述する --> <div id="rect1-back"> <div id="rect2-back"> <img src="images/dsc00095m_flip_h.jpg" alt="white blossoms"> <div id="rect1-front"> <div id="rect2-front"> <img src="images/dsc00007m.jpg" alt="red leaves"> </body> </html> CSS の記述 (BackfaceVisibilityAnime5.css) #stage ステージのスタイルを指定します #stage { margin: 30px 0px 0px 50px; width: 480px; height: 510px; border: solid 1px black; position: relative; #stage #wrap 要素のスタイルを指定します position は absolute 位置は top: 100px; left: 50px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 380px height は 310px で指定します 背景色を background-color: lightgray;( 薄いグレー ) で指定し ます 画像に遠近感を持たせるため perspective: 500px; と指定します 3
#stage #wrap { top: 100px; left: 50px; background-color: lightgray; perspective: 500px; -webkit-perspective: 500px; #rect1-back 要素 ( 下の画像の外枠 ) のスタイルを指定します position は absolute 位置は (#wrap ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します ボーダーを border: solid 50px yellowgreen; ( 黄緑色 ) で指定して外枠を描いています 下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible; と指定します 外枠と内側の画像を3Dで別々に動かすので transform-style: preserve-3d; と指定します アニメーション名を BackFaceAnimeB 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect1-back { width: 280px; height: 210px; border: solid 50px yellowgreen; backface-visibility: visible; -webkit-backface-visibility: visible; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeB 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeB に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させます @keyframes BackFaceAnimeB { from { to { transform: rotatey(-360deg); 4
@-webkit-keyframes BackFaceAnimeB { from { to { -webkit-transform: rotatey(-360deg); #rect2-back 要素 ( 下の画像の内側の白い桜の画像 ) のスタイルを指定します position は absolute 位置は (#rect1-back ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します 下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible; と指定します アニメーション名を BackFaceAnimeB2 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect2-back { width: 280px; height: 210px; backface-visibility: visible; -webkit-backface-visibility: visible; animation: BackFaceAnimeB2 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB2 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeB2 に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(720deg); で Y 軸の正方向から見て時計回りに 720 度回転させます @keyframes BackFaceAnimeB2 { from { to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeB2 { from { to { -webkit-transform: rotatey(720deg); #rect2-back img 要素 ( 白い桜の画像 ) のスタイルを指定します position は absolute 位置は (#rect2-back ボックスの左上端を起点とした位置 ) で指定 します width は 100% height は 100% で指定します 5
#rect2-back img { width: 100%; height: 100%; #rect1-front 要素 ( 上の画像の外枠 ) のスタイルを指定します position は absolute 位置は (#wrap ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します ボーダーを border: solid 50px cyan;( 水色 ) で指定して外枠を描いています 上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden; と指定します 外枠と内側の画像を3Dで別々に動かすので transform-style: preserve-3d; と指定します アニメーション名を BackFaceAnimeF 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect1-front { width: 280px; height: 210px; border: solid 50px cyan; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeF 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeF に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させます @keyframes BackFaceAnimeF { from { to { transform: rotatey(-360deg); @-webkit-keyframes BackFaceAnimeF { from { to { -webkit-transform: rotatey(-360deg); 6
#rect2-front 要素 ( 上の画像の内側の紅葉の画像 ) のスタイルを指定します position は absolute 位置は (#rect1-front ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します 上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden; と指定します アニメーション名を BackFaceAnimeF2 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect2-front { width: 280px; height: 210px; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: BackFaceAnimeF2 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF2 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeF2 に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(720deg); で Y 軸の正方向から見て時計回りに 720 度回転させます @keyframes BackFaceAnimeF2 { from { to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeF2 { from { to { -webkit-transform: rotatey(720deg); #rect2-front img 要素 ( 紅葉の画像 ) のスタイルを指定します position は absolute 位 置は (#rect2-front ボックスの左上端を起点とした位置 ) で指定し ます width は 100% height は 100% で指定します #rect2-back img { width: 100%; height: 100%; 7
画像の表と裏を回転させるアニメーション 2 サンプル CSS2 外側と内側が逆回転します 外枠も内側も画像です BackfaceVisibilityAnime8 の説明 HTML の記述 (BackfaceVisibilityAnime8.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 wrap の div 要素 ( グレーの背景 ) を記述し 中につぎの記述をします まず裏面の要素を指定します ( 表面より必ず先に記述します ) id 属性 rect1-back の div 要素を記述し 中につぎの記述をします id 属性 rect1-back-clip1 から rect1-back-clip4 の 4 つの img 要素を記述し それぞれの img 要素に桜の並木道の画像を左右反転させた画 像 images/dsc00088l_flip_h.jpg を指定します id 属性 rect2-back の div 要素を記述し 中に白い桜の画像を左右反転させた画像 images/dsc00095m_flip_h.jpg を指定します ( 注 意 : 横に回転させる裏面なので 画像の左右を反転させた画像を使います ) つぎに表面の要素を指定します id 属性 rect1-front の div 要素を記述し 中につぎの記 述をします id 属性 rect1-front-clip1 から rect1-front-clip4 の 4 つの img 要素を記述 し それぞれの img 要素に緑の並木道の画像 images/dsc00203l.jpg を指定します id 属性 8
rect2-front の div 要素を記述し 中に紅葉の画像 images/dsc00007m.jpg を指定します ( 注意 : 表面の画像は左右を反転させた画像を使う必要はありません ) <!DOCTYPE html> <html> <head> <title>backfacevisibilityanime8</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="backfacevisibilityanime8.css"> </head> <body> <p> backface-visibility を使ったアニメーション </p> <div id="stage"> <div id="wrap"> <!-- back side, front side の順で記述する --> <div id="rect1-back"> <img id="rect1-back-clip1" src="images/dsc00088l_flip_h.jpg" alt="cherry road"> <img id="rect1-back-clip2" src="images/dsc00088l_flip_h.jpg" alt="cherry road"> <img id="rect1-back-clip3" src="images/dsc00088l_flip_h.jpg" alt="cherry road"> <img id="rect1-back-clip4" src="images/dsc00088l_flip_h.jpg" alt="cherry road"> <div id="rect2-back"> <img src="images/dsc00095m_flip_h.jpg" alt="white blossoms"> <div id="rect1-front"> <img id="rect1-front-clip1" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip2" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip3" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip4" src="images/dsc00203l.jpg" alt="green road"> <div id="rect2-front"> <img src="images/dsc00007m.jpg" alt="red leaves"> </body> </html> CSS の記述 (BackfaceVisibilityAnime8.css) #stage ステージのスタイルを指定します #stage { margin: 30px 0px 0px 50px; width: 480px; height: 510px; 9
border: solid 1px black; position: relative; #stage #wrap 要素のスタイルを指定します position は absolute 位置は top: 100px; left: 50px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 380px height は 310px で指定します 背景色を background-color: lightgray;( 薄いグレー ) で指定します 画像に遠近感を持たせるため perspective: 500px; と指定します #stage #wrap { top: 100px; left: 50px; background-color: lightgray; perspective: 500px; -webkit-perspective: 500px; #rect1-back 要素 ( 下の画像の外枠の桜の並木道の画像 ) のスタイルを指定します position は absolute 位置は (#wrap ボックスの左上端を起点とした位置 ) で指定します width は 380px height は 310px で指定します 下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible; と指定します 外枠と内側の画像を3Dで別々に動かすので transform-style: preserve-3d; と指定します アニメーション名を BackFaceAnimeB 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect1-back { backface-visibility: visible; -webkit-backface-visibility: visible; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeB 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB 20s linear 0s infinite normal; 10
アニメーション名 BackFaceAnimeB に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させます @keyframes BackFaceAnimeB { from { to { transform: rotatey(-360deg); @-webkit-keyframes BackFaceAnimeB { from { to { -webkit-transform: rotatey(-360deg); 外枠の画像の作り方 BackfaceVisibilityAnime5 のアニメーションでは 外枠は border プロパティを使用して作りましたが 外枠に画像を使おうとする場合 border の部分だけに画像を表示することはできません background-image プロパティで画像を指定して background-clip プロパティの値を border-box background-color プロパティの値を transparent で指定しても border-box の内側全体に画像が表示されてしまいます そこでつぎのような裏技を使って外枠だけに画像を表示してみます clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像を外枠になるように貼り付けます 0px 50px 50px 330px 380px 斜線の部分を clip プロパティで抽出 して外枠の画像に します 260px 310px CSS はつぎのように指定します 11
#rect1-back-clip1 { clip: rect(0px 50px 310px 0px); #rect1-back-clip2 { clip: rect(0px 330px 50px 50px); #rect1-back-clip3 { clip: rect(0px 380px 310px 330px); #rect1-back-clip4 { clip: rect(260px 330px 310px 50px); #rect2-back 要素 ( 下の画像の内側の白い桜の画像 ) のスタイルを指定します position は absolute 位置は top: 50px; left: 50px;(#rect1-back ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します 下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible; と指定します アニメーション名を BackFaceAnimeB2 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect2-back { top: 50px; left: 50px; width: 280px; height: 210px; backface-visibility: visible; -webkit-backface-visibility: visible; 12
animation: BackFaceAnimeB2 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB2 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeB2 に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(720deg); で Y 軸の正方向から見て時計回りに 720 度回転させます @keyframes BackFaceAnimeB2 { from { to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeB2 { from { to { -webkit-transform: rotatey(720deg); #rect2-back img 要素 ( 白い桜の画像 ) のスタイルを指定します position は absolute 位置は (#rect2-back ボックスの左上端を起点とした位置 ) で指定 します width は 100% height は 100% で指定します #rect2-back img { width: 100%; height: 100%; #rect1-front 要素 ( 上の画像の外枠の緑の並木道の画像 ) のスタイルを指定します position は absolute 位置は (#wrap ボックスの左上端を起点とした位置 ) で指定します width は 380px height は 310px で指定します 上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden; と指定します 外枠と内側の画像を3Dで別々に動かすので transform-style: preserve-3d; と指定します アニメーション名を BackFaceAnimeF 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect1-front { 13
backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeF 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeF に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させます @keyframes BackFaceAnimeF { from { to { transform: rotatey(-360deg); @-webkit-keyframes BackFaceAnimeF { from { to { -webkit-transform: rotatey(-360deg); #rect1-front 要素 ( 上の画像の外枠の緑の並木道の画像 ) も外枠だけに画像を表示するの で clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像を外枠 になるように貼り付けます #rect1-front-clip1 { clip: rect(0px 50px 310px 0px); #rect1-front-clip2 { clip: rect(0px 330px 50px 50px); #rect1-front-clip3 { 14
clip: rect(0px 380px 310px 330px); #rect1-front-clip4 { clip: rect(260px 330px 310px 50px); #rect2-front 要素 ( 上の画像の内側の紅葉の画像 ) のスタイルを指定します position は absolute 位置は (#rect1-front ボックスの左上端を起点とした位置 ) で指定します width は 280px height は 210px で指定します 上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden; と指定します アニメーション名を BackFaceAnimeF2 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rect2-front { width: 280px; height: 210px; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: BackFaceAnimeF2 20s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF2 20s linear 0s infinite normal; アニメーション名 BackFaceAnimeF2 に対応するタイムライン (@keyframes) を指定します from から to の間に transform: rotatey(720deg); で Y 軸の正方向から見て時計回りに 720 度回転させます @keyframes BackFaceAnimeF2 { from { to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeF2 { from { to { -webkit-transform: rotatey(720deg); 15
#rect2-front img 要素 ( 紅葉の画像 ) のスタイルを指定します position は absolute 位 置は (#rect2-front ボックスの左上端を起点とした位置 ) で指定し ます width は 100% height は 100% で指定します #rect2-back img { width: 100%; height: 100%; 画像の表と裏を回転させるアニメーション 3 サンプル CSS3 1 つの画像が外側と内側に分かれてそれぞれ逆回転します BackfaceVisibilityAnime9 の説明 HTML の記述 (BackfaceVisibilityAnime9.html) 16
id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 wrap の div 要素 ( グレーの背景 ) を記述し 中につぎの記述をします まず裏面の要素を指定します ( 表面より必ず先に記述します ) id 属性 rect1-back の div 要素を記述し 中につぎの記述をします id 属性 rect1-back-clip1 から rect1-back-clip4 の4つの img 要素を記述し それぞれの img 要素に桜と橋の画像を左右反転させた画像 images/dsc00092l_flip_h.jpg を指定します id 属性 rect2-back の div 要素を記述し この中にも桜と橋の画像を左右反転させた画像 images/dsc00092l_flip_h.jpg を指定します ( 注意 : 横に回転させる裏面なので 画像の左右を反転させた画像を使います ) つぎに表面の要素を指定します id 属性 rect1-front の div 要素を記述し 中につぎの記述をします id 属性 rect1-front-clip1 から rect1-front-clip4 の4つの img 要素を記述し それぞれの img 要素に緑の並木道の画像 images/dsc00203l.jpg を指定します id 属性 rect2-front の div 要素を記述し この中にも緑の並木道の画像 images/dsc00203l.jpg を指定します ( 注意 : 表面の画像は左右を反転させた画像を使う必要はありません ) <!DOCTYPE html> <html> <head> <title>backfacevisibilityanime9</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="backfacevisibilityanime9.css"> </head> <body> <p> backface-visibility を使ったアニメーション </p> <div id="stage"> <div id="wrap"> <!-- back side, front side の順で記述する --> <div id="rect1-back"> <img id="rect1-back-clip1" src="images/dsc00092l_flip_h.jpg" alt="cherry and bridge"> <img id="rect1-back-clip2" src="images/dsc00092l_flip_h.jpg" alt="cherry and bridge"> <img id="rect1-back-clip3" src="images/dsc00092l_flip_h.jpg" alt="cherry and bridge"> <img id="rect1-back-clip4" src="images/dsc00092l_flip_h.jpg" alt="cherry and bridge"> <div id="rect2-back"> <img id="rect2-back-clip" src="images/dsc00092l_flip_h.jpg" alt="cherry and bridge"> <div id="rect1-front"> <img id="rect1-front-clip1" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip2" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip3" src="images/dsc00203l.jpg" alt="green road"> <img id="rect1-front-clip4" src="images/dsc00203l.jpg" alt="green road"> 17
<div id="rect2-front"> <img id="rect2-front-clip" src="images/dsc00203l.jpg" alt="green road"> </body> </html> CSS の記述 (BackfaceVisibilityAnime9.css) #stage ステージのスタイルを指定します BackfaceVisibilityAnime8.css の #stage 要素の 指定と同じです (CSS は省略 ) #stage #wrap 要素のスタイルを指定します BackfaceVisibilityAnime8.css の #stage #wrap 要素の指定と同じです (CSS は省略 ) #rect1-back 要素 ( 下の画像の外枠の桜と橋の画像の外枠 ) のスタイルを指定します BackfaceVisibilityAnime8.css の #rect1-back 要素の指定とほぼ同じですが 違う部分は アニメーション BackFaceAnimeB の実行時間を 30s で指定する部分だけです #rect1-back { backface-visibility: visible; -webkit-backface-visibility: visible; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeB 30s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB 30s linear 0s infinite normal; アニメーション名 BackFaceAnimeB に対応するタイムライン ( @keyframes ) は BackfaceVisibilityAnime8.css と違う指定です from から 10% まではそのままで 10% から 50% の間に transform: rotatey(-180deg); で Y 軸の正方向から見て反時計回りに 180 度回転 させます 50% から 60% の間は transform: rotatey(-180deg); のままにします 60% から to までの間に transform: rotatey(-180deg); から transform: rotatey(-360deg); で Y 軸の正 方向から見て反時計回りに 360 度まで回転させます 18
@keyframes BackFaceAnimeB { from { transform: rotatey(0deg); 10% { transform: rotatey(0deg); 50% { transform: rotatey(-180deg); 60% { transform: rotatey(-180deg); to { transform: rotatey(-360deg); @-webkit-keyframes BackFaceAnimeB { from { -webkit-transform: rotatey(0deg); 10% { -webkit-transform: rotatey(0deg); 50% { -webkit-transform: rotatey(-180deg); 60% { -webkit-transform: rotatey(-180deg); to { -webkit-transform: rotatey(-360deg); #rect1-back 要素 ( 下の画像の外枠の桜と橋の画像の外枠 ) も外枠だけに画像を表示するので clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像を外枠になるように貼り付けます ackfacevisibilityanime8.css の #rect1-back 要素の #rect1-back-clip1 から #rect1-back-clip4 の指定と同じです (CSS は省略 ) #rect2-back 要素 ( 下の画像の外枠の桜と橋の画像の内側 ) のスタイルを指定します BackfaceVisibilityAnime8.css の #rect2-back 要素の指定とほぼ同じですが 違う部分は アニメーション BackFaceAnimeB2 の実行時間を 30s で指定する部分だけです #rect2-back { top: 50px; left: 50px; width: 280px; height: 210px; backface-visibility: visible; -webkit-backface-visibility: visible; animation: BackFaceAnimeB2 30s linear 0s infinite normal; -webkit-animation: BackFaceAnimeB2 30s linear 0s infinite normal; アニメーション名 BackFaceAnimeB2 に対応するタイムライン ( @keyframes ) は BackfaceVisibilityAnime8.css と違う指定です from から 10% まではそのままで 10% から 50% の間に transform: rotatey(360deg); で Y 軸の正方向から見て時計回りに 360 度回転さ せます 50% から 60% の間は transform: rotatey(360deg); のままにします 60% から to ま での間に transform: rotatey(360deg); から transform: rotatey(720deg); で Y 軸の正方向 から見て時計回りに 720 度まで回転させます 19
@keyframes BackFaceAnimeB2 { from { transform: rotatey(0deg); 10% { transform: rotatey(0deg); 50% { transform: rotatey(360deg); 60% { transform: rotatey(360deg); to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeB2 { from { -webkit-transform: rotatey(0deg); 10% { -webkit-transform: rotatey(0deg); 50% { -webkit-transform: rotatey(360deg); 60% { -webkit-transform: rotatey(360deg); to { -webkit-transform: rotatey(720deg); #rect2-back 要素 ( 下の画像の外枠の桜と橋の画像の内側 ) も内側だけに画像を表示するの で clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像を内側 になるように貼り付けます #rect2-back-clip { top: -50px; left: -50px; clip: rect(50px 350px 260px 50px); #rect1-front 要素 ( 上の画像の外枠の緑の並木道の画像の外枠 ) のスタイルを指定します BackfaceVisibilityAnime8.css の #rect1-front 要素の指定とほぼ同じですが 違う部分は アニメーション BackFaceAnimeF の実行時間を 30s で指定する部分だけです #rect1-front { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: BackFaceAnimeF 30s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF 30s linear 0s infinite normal; 20
アニメーション名 BackFaceAnimeF に対応するタイムライン ( @keyframes ) は BackfaceVisibilityAnime8.css と違う指定です from から 10% まではそのままで 10% から 50% の間に transform: rotatey(-180deg); で Y 軸の正方向から見て反時計回りに 180 度回転させます 50% から 60% の間は transform: rotatey(-180deg); のままにします 60% から to までの間に transform: rotatey(-180deg); から transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度まで回転させます @keyframes BackFaceAnimeF { from { transform: rotatey(0deg); 10% { transform: rotatey(0deg); 50% { transform: rotatey(-180deg); 60% { transform: rotatey(-180deg); to { transform: rotatey(-360deg); @-webkit-keyframes BackFaceAnimeF { from { -webkit-transform: rotatey(0deg); 10% { -webkit-transform: rotatey(0deg); 50% { -webkit-transform: rotatey(-180deg); 60% { -webkit-transform: rotatey(-180deg); to { -webkit-transform: rotatey(-360deg); #rect1-front 要素 ( 上の画像の外枠の緑の並木道の画像の外枠 ) も外枠だけに画像を表示するので clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像を外枠になるように貼り付けます BackfaceVisibilityAnime8.css の #rect1-front 要素の #rect1-front-clip1 から #rect1-front-clip4 の指定と同じです (CSS は省略 ) #rect2-front 要素 ( 上の画像の外枠の緑の並木道の画像の内側 ) のスタイルを指定します BackfaceVisibilityAnime8.css の #rect2-front 要素の指定とほぼ同じですが 違う部分は アニメーション BackFaceAnimeF2 の実行時間を 30s で指定する部分だけです #rect2-front { top: 50px; left: 50px; width: 280px; height: 210px; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: BackFaceAnimeF2 30s linear 0s infinite normal; -webkit-animation: BackFaceAnimeF2 30s linear 0s infinite normal; 21
アニメーション名 BackFaceAnimeF2 に対応するタイムライン ( @keyframes ) は BackfaceVisibilityAnime8.css と違う指定です from から 10% まではそのままで 10% から 50% の間に transform: rotatey(360deg); で Y 軸の正方向から見て時計回りに 360 度回転させます 50% から 60% の間は transform: rotatey(360deg); のままにします 60% から to までの間に transform: rotatey(360deg); から transform: rotatey(720deg); で Y 軸の正方向から見て時計回りに 720 度まで回転させます @keyframes BackFaceAnimeF2 { from { transform: rotatey(0deg); 10% { transform: rotatey(0deg); 50% { transform: rotatey(360deg); 60% { transform: rotatey(360deg); to { transform: rotatey(720deg); @-webkit-keyframes BackFaceAnimeF2 { from { -webkit-transform: rotatey(0deg); 10% { -webkit-transform: rotatey(0deg); 50% { -webkit-transform: rotatey(360deg); 60% { -webkit-transform: rotatey(360deg); to { -webkit-transform: rotatey(720deg); #rect2-front 要素 ( 上の画像の外枠の緑の並木道の画像の内側 ) も内側だけに画像を表示 するので clip プロパティを使用して画像から必要な部分だけを抽出して 抽出した画像 を内側になるように貼り付けます #rect2-front-clip { top: -50px; left: -50px; clip: rect(50px 350px 260px 50px); 22