WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

CSS3によるアニメーションーその３

HTML5+CSS3

「transform-style: preserve-3d」を使い、画像の表と裏が回転しているように見せる。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
/*=================================================
 * ブラウザのデフォルトのスタイルをリセットする
 * ================================================= */

html, body, ul, ol, li, p {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

body {
 line-height: 1.0;
}

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}


body {
  background-color: #000;
}

#bg {
  width: 500px;
  height: 200px;
  padding: 10px;
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
  /*上下左右自動で真ん中に*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius:10px;
 }

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

ul#flip li {
   /*2枚目の写真を1枚目の写真に重ねる*/
 width: 500px;
 position: absolute;
 left: 50%; /*画像が中央にくるように*/
 margin-left: -250px; /*画像の横幅の半分を左にずらす事でピッタリ中央に来る*/
 transform-style: preserve-3d;    /*3Dアニメーションを有効にする*/
 -webkit-transform-style: preserve-3d;
 backface-visibility: hidden;  /*回転した画像の裏面が見えるかどうかの設定*/
 -webkit-backface-visibility: hidden;

}
#front {
  animation: flipFront 5s infinite alternate; /*「alternate」はアニメーションが1回再生したら逆再生になる*/
-webkit-animation:flipFront 5s infinite alternate;
}
#back {
  animation: flipBack 5s infinite alternate; /*「alternate」はアニメーションが1回再生したら逆再生になる*/
 -webkit-animation: flipBack 5s infinite alternate;
}
@-webkit-keyframes flipFront {
 0% {  transform: rotateY(0deg); }
 45% { transform: rotateY(0deg);}
 55% { transform: rotateY(180deg);}
 100% { transform: rotateY(180deg);}
}
@keyframes flipFront {
 0% {  transform: rotateY(0deg);}
 45% { transform: rotateY(0deg);}
 55% { transform: rotateY(180deg);}
 100% { transform: rotateY(180deg);}
}
@-webkit-keyframes flipBack {
 0% { transform: rotateY(180deg);}
 45% { transform: rotateY(180deg);}
 55% { transform: rotateY(0deg);}
 100% { transform: rotateY(0deg);}
}
@keyframes flipBack {
 0% { transform: rotateY(180deg);}
 45% { transform: rotateY(180deg);}
 55% { transform: rotateY(0deg);}
 100% { transform: rotateY(0deg);}
}

</style>
</head>
<body>

<div id="bg">
<ul id="flip">
<li id="front"><img src="img/01.png" alt=""></li>
<li id="back"><img src="img/02.png" alt=""></li>
</ul>
</div>
</body>
</html>