画像全体を左右反転させると下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

(1)

1342-6 応用１ Backface Image

●画像の表と裏を回転させるアニメーション１

外側と内側が逆回転します。裏側も見えますよ！

〔仕組みの説明〕

サンプルＣＳＳ１

下の画像（黄緑色の外枠に白い桜）と上の画像

（水色の外枠に紅葉）を、左上端を合わせて同

じ位置に重ねてあります。

(2)

【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 を指定します。

（注意：表面の画像は左右を反転させた画像を使う必

画像全体を左右反転させると、下の画像（黄緑

色の外枠に白い桜）は backface-visibility:

visible;と指定してあるので裏側が表示されま

す。上の画像（水色の外枠に紅葉）は

backface-visibility: hidden;と指定してある

ので裏側が表示されなくなります。

下の画像（黄緑色の外枠に白い桜）と、上の画

像（水色の外枠に紅葉）の外枠だけ反転させた

状態では、上の画像の外枠だけが表示されなく

なります。

（これは下の画像の裏側の外枠（黄緑

色）と上の画像の内側（紅葉の画像）がこちら

側を向いている状態になります。

）

下の画像（黄緑色の外枠に白い桜）と、上の画

像（水色の外枠に紅葉）の内側（紅葉の画像）

だけ反転させた状態では、上の画像の内側の画

像だけが表示されなくなります。

（これは下の画

像の内側の画像（白い桜）と上の画像の外枠（水

色）がこちら側を向いている状態になります。

）

(3)

要はありません。

）

〔CSS の記述（BackfaceVisibilityAnime5.css）

〕

#stage ステージのスタイルを指定します。

#stage #wrap 要素のスタイルを指定します。position は absolute、

位置は top: 100px; left:

50px;（#stage ボックスの左上端を起点とした位置）で指定します。width は 380px、height

は 310px で指定します。背景色を background-color: lightgray;（薄いグレー）で指定し

ます。

画像に遠近感を持たせるため、perspective: 500px;と指定します。

#stage { margin: 30px 0px 0px 50px; width: 480px; height: 510px; border: solid 1px black; position: relative; } <!DOCTYPE html> <html> <head> <title>BackfaceVisibilityAnime5</title> <meta charset="UTF-8">

<body>

<p>■backface-visibility を使ったアニメーション。</p> <div id="stage">

<div id="rect1-back">

</div>

(4)

#rect1-back 要素（下の画像の外枠）のスタイルを指定します。position は absolute、位

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

width は 280px、

height は 210px で指定します。

ボーダーを border: solid 50px yellowgreen;

（黄緑色）で指定して外枠を描いています。

下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible;と指

定します。

外枠と内側の画像を３Ｄで別々に動かすので transform-style: preserve-3d;と指定します。

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

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

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

from から to の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに

360 度回転させます。

#rect1-back {

top: 0px; left: 0px;

width: 280px; height: 210px; border: solid 50px yellowgreen; position: absolute; 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; } #stage #wrap { top: 100px; left: 50px; width: 380px; height: 310px; background-color: lightgray; position: absolute; perspective: 500px; -webkit-perspective: 500px; } @keyframes BackFaceAnimeB { from { } to { transform: rotateY(-360deg); } }

(5)

#rect2-back 要素（下の画像の内側の白い桜の画像）のスタイルを指定します。position

は absolute、位置は top: 0px; left: 0px;（#rect1-back ボックスの左上端を起点とした

位置）で指定します。width は 280px、height は 210px で指定します。

下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible;と指

定します。

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

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

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

from から to の間に transform: rotateY(720deg);で Y 軸の正方向から見て時計回りに 720

度回転させます。

#rect2-back img 要素（白い桜の画像）のスタイルを指定します。position は absolute、

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

します。width は 100%、height は 100%で指定します。

@-webkit-keyframes BackFaceAnimeB { from { } to { -webkit-transform: rotateY(-360deg); } } #rect2-back { top: 0px; left: 0px; width: 280px; height: 210px; position: absolute; backface-visibility: visible; -webkit-backface-visibility: visible;

animation: BackFaceAnimeB2 20s linear 0s infinite normal;

-webkit-animation: BackFaceAnimeB2 20s linear 0s infinite normal; } @keyframes BackFaceAnimeB2 { from { } to { transform: rotateY(720deg); } } @-webkit-keyframes BackFaceAnimeB2 { from { } to { -webkit-transform: rotateY(720deg); } }

(6)

#rect1-front 要素（上の画像の外枠）のスタイルを指定します。position は absolute、位

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

width は 280px、height は 210px で指定します。ボーダーを border: solid 50px cyan;（水

色）で指定して外枠を描いています。

上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden;と

指定します。

外枠と内側の画像を３Ｄで別々に動かすので transform-style: preserve-3d;と指定します。

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

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

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

from から to の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに

360 度回転させます。

#rect2-back img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #rect1-front { top: 0px; left: 0px; width: 280px; height: 210px; border: solid 50px cyan; position: absolute; 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; } @keyframes BackFaceAnimeF { from { } to { transform: rotateY(-360deg); } } @-webkit-keyframes BackFaceAnimeF { from { } to { -webkit-transform: rotateY(-360deg); } }

(7)

#rect2-front 要素（上の画像の内側の紅葉の画像）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#rect1-front ボックスの左上端を起点とした位

置）で指定します。width は 280px、height は 210px で指定します。

上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden;と

指定します。

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

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

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

from から to の間に transform: rotateY(720deg);で Y 軸の正方向から見て時計回りに 720

度回転させます。

#rect2-front img 要素（紅葉の画像）のスタイルを指定します。position は absolute、位

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

ます。width は 100%、height は 100%で指定します。

#rect2-front { top: 0px; left: 0px; width: 280px; height: 210px; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden;

animation: BackFaceAnimeF2 20s linear 0s infinite normal;

-webkit-animation: BackFaceAnimeF2 20s linear 0s infinite normal; } @keyframes BackFaceAnimeF2 { from { } to { transform: rotateY(720deg); } } @-webkit-keyframes BackFaceAnimeF2 { from { } to { -webkit-transform: rotateY(720deg); } } #rect2-back img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; }

(8)

●画像の表と裏を回転させるアニメーション２

外側と内側が逆回転します。外枠も内側も画像です。

【BackfaceVisibilityAnime8 の説明】

〔HTML の記述（BackfaceVisibilityAnime8.html）

〕

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

id 属性 wrap の div 要素（グレーの背景）を記述し、中につぎの記述をします。

まず裏面の要素を指定します（表面より必ず先に記述します）

。id 属性 rect1-back の div

要素を記述し、中につぎの記述をします。id 属性 rect1-back-clip1 から rect1-back-clip4

の４つの 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 の４つの img 要素を記述

し、それぞれの img 要素に緑の並木道の画像 images/DSC00203L.jpg を指定します。id 属性

(9)

rect2-front の div 要素を記述し、中に紅葉の画像 images/DSC00007M.jpg を指定します。

（注意：表面の画像は左右を反転させた画像を使う必要はありません。）

〔CSS の記述（BackfaceVisibilityAnime8.css）

〕

#stage ステージのスタイルを指定します。

#stage { margin: 30px 0px 0px 50px; width: 480px; height: 510px; <!DOCTYPE html> <html> <head> <title>BackfaceVisibilityAnime8</title> <meta charset="UTF-8">

<body>

</div>

(10)

#stage #wrap 要素のスタイルを指定します。position は absolute、

位置は top: 100px; left:

50px;（#stage ボックスの左上端を起点とした位置）で指定します。width は 380px、height

は 310px で指定します。背景色を background-color: lightgray;（薄いグレー）で指定し

ます。

画像に遠近感を持たせるため、perspective: 500px;と指定します。

#rect1-back 要素（下の画像の外枠の桜の並木道の画像）のスタイルを指定します。position

は absolute、位置は top: 0px; left: 0px;（#wrap ボックスの左上端を起点とした位置）

で指定します。width は 380px、height は 310px で指定します。

下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible;と指

定します。

外枠と内側の画像を３Ｄで別々に動かすので transform-style: preserve-3d;と指定します。

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

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

#rect1-back { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; backface-visibility: visible; -webkit-backface-visibility: visible; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;

-webkit-animation: BackFaceAnimeB 20s linear 0s infinite normal; } #stage #wrap { top: 100px; left: 50px; width: 380px; height: 310px; background-color: lightgray; position: absolute; perspective: 500px; -webkit-perspective: 500px; }

border: solid 1px black; position: relative; }

(11)

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

from から to の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに

360 度回転させます。

〔外枠の画像の作り方〕

BackfaceVisibilityAnime5 のアニメーションでは、外枠は border プロパティを使用して作

りましたが、外枠に画像を使おうとする場合、border の部分だけに画像を表示することは

できません。background-image プロパティで画像を指定して background-clip プロパティ

の値を border-box、background-color プロパティの値を transparent で指定しても、

border-box の内側全体に画像が表示されてしまいます。

そこでつぎのような裏技を使って外枠だけに画像を表示してみます。clip プロパティを使

用して画像から必要な部分だけを抽出して、抽出した画像を外枠になるように貼り付けま

す。

CSS はつぎのように指定します。

@keyframes BackFaceAnimeB { from { } to { transform: rotateY(-360deg); } } @-webkit-keyframes BackFaceAnimeB { from { } to { -webkit-transform: rotateY(-360deg); } }

50px

330px

380px

0px

310px

50px

260px

斜線の部分を clip

プロパティで抽出

して外枠の画像に

します。

(12)

#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; position: absolute; backface-visibility: visible; -webkit-backface-visibility: visible; #rect1-back-clip1 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(0px 50px 310px 0px); } #rect1-back-clip2 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(0px 330px 50px 50px); } #rect1-back-clip3 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(0px 380px 310px 330px); } #rect1-back-clip4 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(260px 330px 310px 50px); }

(13)

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

from から to の間に transform: rotateY(720deg);で Y 軸の正方向から見て時計回りに 720

度回転させます。

#rect2-back img 要素（白い桜の画像）のスタイルを指定します。position は absolute、

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

します。width は 100%、height は 100%で指定します。

#rect1-front 要素（上の画像の外枠の緑の並木道の画像）のスタイルを指定します。

position は absolute、位置は top: 0px; left: 0px;（#wrap ボックスの左上端を起点とし

た位置）で指定します。width は 380px、height は 310px で指定します。

上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden;と

指定します。

外枠と内側の画像を３Ｄで別々に動かすので transform-style: preserve-3d;と指定します。

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

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

@keyframes BackFaceAnimeB2 { from { } to { transform: rotateY(720deg); } } @-webkit-keyframes BackFaceAnimeB2 { from { } to { -webkit-transform: rotateY(720deg); } } #rect2-back img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #rect1-front { top: 0px; left: 0px; width: 380px; height: 310px;

-webkit-animation: BackFaceAnimeB2 20s linear 0s infinite normal; }

(14)

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

from から to の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに

360 度回転させます。

#rect1-front 要素（上の画像の外枠の緑の並木道の画像）も外枠だけに画像を表示するの

で、clip プロパティを使用して画像から必要な部分だけを抽出して、抽出した画像を外枠

になるように貼り付けます。

@keyframes BackFaceAnimeF { from { } to { transform: rotateY(-360deg); } } @-webkit-keyframes BackFaceAnimeF { from { } to { -webkit-transform: rotateY(-360deg); } } position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;

-webkit-animation: BackFaceAnimeF 20s linear 0s infinite normal; } #rect1-front-clip1 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(0px 50px 310px 0px); } #rect1-front-clip2 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(0px 330px 50px 50px); } #rect1-front-clip3 { top: 0px; left: 0px; width: 380px; height: 310px;

(15)

#rect2-front 要素（上の画像の内側の紅葉の画像）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#rect1-front ボックスの左上端を起点とした位

置）で指定します。width は 280px、height は 210px で指定します。

上の画像が左右反転した時に裏側が表示されないように backface-visibility: hidden;と

指定します。

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

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

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

from から to の間に transform: rotateY(720deg);で Y 軸の正方向から見て時計回りに 720

度回転させます。

#rect2-front { top: 0px; left: 0px; width: 280px; height: 210px; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden;

-webkit-animation: BackFaceAnimeF2 20s linear 0s infinite normal; } @keyframes BackFaceAnimeF2 { from { } to { transform: rotateY(720deg); } } @-webkit-keyframes BackFaceAnimeF2 { from { } to { -webkit-transform: rotateY(720deg); } } position: absolute; clip: rect(0px 380px 310px 330px); } #rect1-front-clip4 { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; clip: rect(260px 330px 310px 50px); }

(16)

#rect2-front img 要素（紅葉の画像）のスタイルを指定します。position は absolute、位

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

ます。width は 100%、height は 100%で指定します。

●画像の表と裏を回転させるアニメーション３

１つの画像が外側と内側に分かれてそれぞれ逆回転します。

【BackfaceVisibilityAnime9 の説明】

〔HTML の記述（BackfaceVisibilityAnime9.html）

〕

#rect2-back img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; }

サンプルＣＳＳ３

(17)

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

id 属性 wrap の div 要素（グレーの背景）を記述し、中につぎの記述をします。

まず裏面の要素を指定します（表面より必ず先に記述します）。id 属性 rect1-back の div

要素を記述し、中につぎの記述をします。id 属性 rect1-back-clip1 から rect1-back-clip4

の４つの 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 の４つの img 要素を記述

し、それぞれの img 要素に緑の並木道の画像 images/DSC00203L.jpg を指定します。id 属性

rect2-front の div 要素を記述し、この中にも緑の並木道の画像 images/DSC00203L.jpg を

指定します。

（注意：表面の画像は左右を反転させた画像を使う必要はありません。

）

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

<body>

</div> </div>

(18)

〔CSS の記述（BackfaceVisibilityAnime9.css）

〕

#stage ステージのスタイルを指定します。BackfaceVisibilityAnime8.css の#stage 要素の

指定と同じです。

（CSS は省略。

）

#stage #wrap 要素のスタイルを指定します。BackfaceVisibilityAnime8.css の#stage #wrap

要素の指定と同じです。

（CSS は省略。）

#rect1-back 要素（下の画像の外枠の桜と橋の画像の外枠）のスタイルを指定します。

BackfaceVisibilityAnime8.css の#rect1-back 要素の指定とほぼ同じですが、違う部分は

アニメーション BackFaceAnimeB の実行時間を 30s で指定する部分だけです。

アニメーション名 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 度まで回転させます。

<img id="rect2-front-clip" src="images/DSC00203L.jpg" alt="green road"> </div> </div> </div> </div> </body> </html> #rect1-back { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; backface-visibility: visible; -webkit-backface-visibility: visible; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;

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

(19)

#rect1-back 要素（下の画像の外枠の桜と橋の画像の外枠）も外枠だけに画像を表示するの

で、clip プロパティを使用して画像から必要な部分だけを抽出して、抽出した画像を外枠

になるように貼り付けます。 ackfaceVisibilityAnime8.css の #rect1-back 要素の

#rect1-back-clip1 から#rect1-back-clip4 の指定と同じです。（CSS は省略。

）

#rect2-back 要素（下の画像の外枠の桜と橋の画像の内側）のスタイルを指定します。

BackfaceVisibilityAnime8.css の#rect2-back 要素の指定とほぼ同じですが、違う部分は

アニメーション BackFaceAnimeB2 の実行時間を 30s で指定する部分だけです。

アニメーション名 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 度まで回転させます。

@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); } } #rect2-back { top: 50px; left: 50px; width: 280px; height: 210px; position: absolute; backface-visibility: visible; -webkit-backface-visibility: visible;

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

(20)

#rect2-back 要素（下の画像の外枠の桜と橋の画像の内側）も内側だけに画像を表示するの

で、clip プロパティを使用して画像から必要な部分だけを抽出して、抽出した画像を内側

になるように貼り付けます。

#rect1-front 要素（上の画像の外枠の緑の並木道の画像の外枠）のスタイルを指定します。

BackfaceVisibilityAnime8.css の#rect1-front 要素の指定とほぼ同じですが、違う部分は

アニメーション BackFaceAnimeF の実行時間を 30s で指定する部分だけです。

@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 { top: -50px; left: -50px; width: 380px; height: 310px; position: absolute; clip: rect(50px 350px 260px 50px); } #rect1-front { top: 0px; left: 0px; width: 380px; height: 310px; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;

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

(21)

アニメーション名 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 度まで回転させます。

#rect1-front 要素（上の画像の外枠の緑の並木道の画像の外枠）も外枠だけに画像を表示

するので、clip プロパティを使用して画像から必要な部分だけを抽出して、抽出した画像

を外枠になるように貼り付けます。BackfaceVisibilityAnime8.css の#rect1-front 要素の

#rect1-front-clip1 から#rect1-front-clip4 の指定と同じです。

（CSS は省略。

）

#rect2-front 要素（上の画像の外枠の緑の並木道の画像の内側）のスタイルを指定します。

BackfaceVisibilityAnime8.css の#rect2-front 要素の指定とほぼ同じですが、違う部分は

アニメーション BackFaceAnimeF2 の実行時間を 30s で指定する部分だけです。

@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); } } #rect2-front { top: 50px; left: 50px; width: 280px; height: 210px; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden;

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

(22)

アニメーション名 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 度まで回転させます。

#rect2-front 要素（上の画像の外枠の緑の並木道の画像の内側）も内側だけに画像を表示

するので、clip プロパティを使用して画像から必要な部分だけを抽出して、抽出した画像

を内側になるように貼り付けます。

@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 { top: -50px; left: -50px; width: 380px; height: 310px; position: absolute; clip: rect(50px 350px 260px 50px); }

1342-6 応用１ Backface Image

●画像の表と裏を回転させるアニメーション１

外側と内側が逆回転します。裏側も見えますよ！

〔仕組みの説明〕

サンプルＣＳＳ１

下の画像（黄緑色の外枠に白い桜）と上の画像

（水色の外枠に紅葉）を、左上端を合わせて同

じ位置に重ねてあります。

【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 を指定します。

（注意：表面の画像は左右を反転させた画像を使う必

画像全体を左右反転させると、下の画像（黄緑

色の外枠に白い桜）は backface-visibility:

visible;と指定してあるので裏側が表示されま

す 。 上 の 画 像 （ 水 色 の 外 枠 に 紅 葉 ） は

backface-visibility: hidden;と指定してある

ので裏側が表示されなくなります。

下の画像（黄緑色の外枠に白い桜）と、上の画

像（水色の外枠に紅葉）の外枠だけ反転させた

状態では、上の画像の外枠だけが表示されなく

なります。

（これは下の画像の裏側の外枠（黄緑

色）と上の画像の内側（紅葉の画像）がこちら

側を向いている状態になります。

）

下の画像（黄緑色の外枠に白い桜）と、上の画

像（水色の外枠に紅葉）の内側（紅葉の画像）

だけ反転させた状態では、上の画像の内側の画

像だけが表示されなくなります。

（これは下の画

像の内側の画像（白い桜）と上の画像の外枠（水

色）がこちら側を向いている状態になります。

）

要はありません。

）

〔CSS の記述（BackfaceVisibilityAnime5.css）

〕

#stage ステージのスタイルを指定します。

#stage #wrap 要素のスタイルを指定します。position は absolute、

位置は top: 100px; left:

50px;（#stage ボックスの左上端を起点とした位置）で指定します。width は 380px、height

は 310px で指定します。背景色を background-color: lightgray;（薄いグレー）で指定し

ます。

画像に遠近感を持たせるため、perspective: 500px;と指定します。

#rect1-back 要素（下の画像の外枠）のスタイルを指定します。position は absolute、位

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

width は 280px、

height は 210px で指定します。

ボーダーを border: solid 50px yellowgreen;

（黄緑色）で指定して外枠を描いています。

下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible;と指

定します。

外枠と内側の画像を３Ｄで別々に動かすので transform-style: preserve-3d;と指定します。

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

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

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

from から to の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに

360 度回転させます。

#rect2-back 要素（下の画像の内側の白い桜の画像）のスタイルを指定します。position

は absolute、位置は top: 0px; left: 0px;（#rect1-back ボックスの左上端を起点とした

位置）で指定します。width は 280px、height は 210px で指定します。

下の画像が左右反転した時に裏側が表示されるように backface-visibility: visible;と指

定します。

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

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

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

from から to の間に transform: rotateY(720deg);で Y 軸の正方向から見て時計回りに 720

述をします。 id 属性 rect2-front の div 要素を記述し、中に紅葉の画像

す。上の画像（水色の外枠に紅葉）は