ＣＳＳ３　画像の回転

★　ＣＳＳ３　画像の回転

●　条件

①　ＣＳＳ３はＩＥ８やＩＥ7では機能しないので注意してください。
②　この記事での説明は、現在の各ブラウザでの最新バージョンでの
　　状態でテストしています。
③　ブラウザは下記

CSS3 Firefox etc. 　　　　・・・本来のＣＳＳ３
Firefox(old Ver) mozilla　・・・ Firefoxの古いバーション
Safari and Chrome　　　　　・・・サファリ、クロームの最新バージョン
Opera　　　　　　　　　　　・・・オペラの最新バージョン
IE9 IE10　　　　　　　　　・・・私のＰＣには入れていないので確認できない。

●　プレフィックス（頭につきます）

-moz-　　・・・ Firefox
-webkit-　・・・ Safari　Google Chrome
-o-　　　・・・ Opera
-ms-　　　・・・ Internet Explorer
なし　　　・・・ＣＳＳ３（現在 FireFox 16.0.2 ではこれが適用されています)

●　この記事で紹介するＣＳＳ３の機能

①　画像にカーソルを乗せると回転します。
②　横回転、縦回転の例を紹介します。
③　実例

■　横回転

■　縦回転

●　やり方

①　下記をＣＳＳの一番下に追加します。（横に回転する）
　　記事内の全画像対象

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　横回転　　　　　　　　　　　　　　*/

/* --------------------------------------------------------- */

a.detailOn img:hover{

-moz-animation:   w_Rotate01  2s ease -2s infinite alternate;/* Firefox(old Ver) mozilla */

-webkit-animation:w_Rotate01  2s ease -2s infinite alternate;/* Safari and Chrome */

-o-animation:     w_Rotate01  2s ease -2s infinite alternate;/* Opera */

-ms-animation:    w_Rotate01  2s ease -2s infinite alternate;/* IE9 IE10 */

animation:        w_Rotate01  2s ease -2s infinite alternate;/* CSS3 Firefox etc. */

}

@-moz-keyframes w_Rotate01{      /* Firefox(old Ver) mozilla */

0%{-webkit-transform:rotateY(0deg);}

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

}

@-webkit-keyframes w_Rotate01 {  /* Safari and Chrome */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-o-@keyframes w_Rotate01 {       /* Opera */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-ms-@keyframes w_Rotate01 {      /* IE9 IE10 */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

@keyframes w_Rotate01 {          /* CSS3 Firefox etc. */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

②　下記をＣＳＳの一番下に追加します。（横に回転する）
　　記事内の全画像対象

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　縦回転　　　　　　　　　　　　　　*/

/* --------------------------------------------------------- */

a.detailOn img:hover{

-moz-animation:   h_Rotate01  2s ease -2s infinite alternate;/* Firefox(old Ver) mozilla */

-webkit-animation:h_Rotate01  2s ease -2s infinite alternate;/* Safari and Chrome */

-o-animation:     h_Rotate01  2s ease -2s infinite alternate;/* Opera */

-ms-animation:    h_Rotate01  2s ease -2s infinite alternate;/* IE9 IE10 */

animation:        h_Rotate01  2s ease -2s infinite alternate;/* CSS3 Firefox etc. */

}

@-moz-keyframes h_Rotate01{      /* Firefox(old Ver) mozilla */

0%{-webkit-transform:rotateX(0deg);}

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

}

@-webkit-keyframes h_Rotate01 {  /* Safari and Chrome */

0%{transform:rotateX(0deg);}

100%{transform:rotateX(360deg);}

}

-o-@keyframes h_Rotate01 {       /* Opera */

0%{transform:rotateX(0deg);}

100%{transform:rotateX(360deg);}

}

-ms-@keyframes h_Rotate01 {      /* IE9 IE10 */

0%{transform:rotateX(0deg);}

100%{transform:rotateX(360deg);}

}

@keyframes h_Rotate01 {          /* CSS3 Firefox etc. */

0%{transform:rotateX(0deg);}

100%{transform:rotateX(360deg);}

}

●　回転を基本にして行う場合

■　各回転（横・縦）のCSSを事前に作成しておいて、記事を書くときに、
　　画像のHTMLを修正（クラスを追加）します。

①　ＣＳＳへ下記の様に追加します（横回転のケース）
　　（w_Rotate01 という名前の　keyframes　を用意します）

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　横回転（keyframes） 　　　　　　　*/

/* --------------------------------------------------------- */

@-moz-keyframes w_Rotate01{      /* Firefox(old Ver) mozilla */

0%{-webkit-transform:rotateY(0deg);}

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

}

@-webkit-keyframes w_Rotate01 {  /* Safari and Chrome */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-o-@keyframes w_Rotate01 {       /* Opera */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-ms-@keyframes w_Rotate01 {      /* IE9 IE10 */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

@keyframes w_Rotate01 {          /* CSS3 Firefox etc. */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

②　ＣＳＳへ下記の様に追加します（横回転のケース）
　　（w_Rotate01 という名前の　keyframes　を使うように指示します）

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　横回転　　　　　　　　　　　　　　*/

/* --------------------------------------------------------- */

img.w_Rotate01:hover{

-moz-animation:   w_Rotate01  2s ease -2s infinite alternate;/* Firefox(old Ver) mozilla */

-webkit-animation:w_Rotate01  2s ease -2s infinite alternate;/* Safari and Chrome */

-o-animation:     w_Rotate01  2s ease -2s infinite alternate;/* Opera */

-ms-animation:    w_Rotate01  2s ease -2s infinite alternate;/* IE9 IE10 */

animation:        w_Rotate01  2s ease -2s infinite alternate;/* CSS3 Firefox etc. */

}

③　画像を横回転にしたい記事などの画像に対して、
　　HTMLタグを表示して、画像のHTML部分に下記の様に
　　 class="w_Rotate01" を　img タグ部分に入れます。
　　（ img タグ内であればどこでもOKです）

<a href="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/o0800060012274324362.jpg"><img border="0" class="w_Rotate01" src="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/t02200165_0800060012274324362.jpg" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" /></a>

④　ＣＳＳへ下記の様に追加します（縦回転のケース）
　　（h_Rotate01 という名前の　keyframes　を用意します）

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　縦回転（keyframes） 　　　　　　　*/

/* --------------------------------------------------------- */

@-moz-keyframes h_Rotate01{ /* Firefox(old Ver) mozilla */

0%{-webkit-transform:rotateY(0deg);}

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

}

@-webkit-keyframes h_Rotate01 { /* Safari and Chrome */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-o-@keyframes h_Rotate01 { /* Opera */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

-ms-@keyframes h_Rotate01 { /* IE9 IE10 */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

@keyframes h_Rotate01 { /* CSS3 Firefox etc. */

0%{transform:rotateY(0deg);}

100%{transform:rotateY(360deg);}

}

⑤　ＣＳＳへ下記の様に追加します（縦回転のケース）
　　（h_Rotate01 という名前の　keyframes　を使うように指示します）

/* --------------------------------------------------------- */

/* 画像の回転　ＣＳＳ３　　縦回転　　　　　　　　　　　　　　*/

/* --------------------------------------------------------- */

img.h_Rotate01:hover{

-moz-animation: h_Rotate01 2s ease -2s infinite alternate;/* Firefox(old Ver) mozilla */

-webkit-animation:h_Rotate01 2s ease -2s infinite alternate;/* Safari and Chrome */

-o-animation: h_Rotate01 2s ease -2s infinite alternate;/* Opera */

-ms-animation: h_Rotate01 2s ease -2s infinite alternate;/* IE9 IE10 */

animation: h_Rotate01 2s ease -2s infinite alternate;/* CSS3 Firefox etc. */

}

⑥　画像を縦回転にしたい記事などの画像に対して、
　　HTMLタグを表示して、画像のHTML部分に下記の様に
　　 class="h_Rotate01" を　img タグ部分に入れます。
　　（ img タグ内であればどこでもOKです）

<a href="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/o0800060012274324362.jpg"><img border="0" class="h_Rotate01" src="http://stat.ameba.jp/user_images/20121107/06/new-blue-777/8d/08/j/t02200165_0800060012274324362.jpg" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" /></a>

ＣＳＳ３ 画像の回転

ＣＳＳ３　画像の回転