サンプル
本サンプル表示用HTML
<div id="stage"> <ul> <li><img src="wp-images/f1.jpg" width="300" height="300"></li> <li><img src="wp-images/f2.jpg" width="300" height="300"></li> <li><img src="wp-images/f3.jpg" width="300" height="300"></li> <li><img src="wp-images/f4.jpg" width="300" height="300"></li> <li><img src="wp-images/f5.jpg" width="300" height="300"></li> </ul> </div>
HTMLのポイント説明
・各スライドを、li 形式で配置する。本サンプル表示用CSS
/* 表示枠 */ #stage { position: relative; width: 310px; height: 310px; background: #000; overflow: hidden; } #stage ul { list-style: none; } /* スライドの初期配置、枠線、透明、回転中心の設定 */ #stage li img { position: absolute; top: 0px; left: 0px; border-top: 5px solid #ddd; border-left: 5px solid #ddd; border-right: 5px solid #555; border-bottom: 5px solid #555; opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } /* 各スライドアニメーション設定 */ #stage li:nth-child(1) img { -webkit-animation: selfrot_h 40s ease 0s infinite; animation: selfrot_h 40s ease 0s infinite; } #stage li:nth-child(2) img { -webkit-animation: selfrot_p 40s ease 8s infinite; animation: selfrot_p 40s ease 8s infinite; } #stage li:nth-child(3) img { -webkit-animation: selfrot_h 40s ease 16s infinite; animation: selfrot_h 40s ease 16s infinite; } #stage li:nth-child(4) img { -webkit-animation: selfrot_p 40s ease 24s infinite; animation: selfrot_p 40s ease 24s infinite; } #stage li:nth-child(5) img { -webkit-animation: selfrot_h 40s ease 32s infinite; animation: selfrot_h 40s ease 32s infinite; } /* animation */ @-webkit-keyframes selfrot_h { 0% { -webkit-transform:perspective(200px) rotateY(-720deg) scale(0, 0);opacity:1;} 5% { -webkit-transform:perspective(200px) rotateY(0deg) scale(1, 1);} 15% { -webkit-transform:perspective(200px) rotateY(0deg) scale(1, 1);} 20% { -webkit-transform:perspective(200px) rotateY(720deg) scale(0, 0);} 100% { -webkit-transform:perspective(200px) rotateY(720deg) scale(0, 0);opacity:1;} } @keyframes selfrot_h { 0% { transform:perspective(200px) rotateY(-720deg) scale(0, 0);opacity:1;} 5% { transform:perspective(200px) rotateY(0deg) scale(1, 1);} 15% { transform:perspective(200px) rotateY(0deg) scale(1, 1);} 20% { transform:perspective(200px) rotateY(720deg) scale(0, 0);} 100% { transform:perspective(200px) rotateY(720deg) scale(0, 0);opacity:1;} } @-webkit-keyframes selfrot_p { 0% { -webkit-transform:perspective(200px) rotateX(-720deg) scale(0, 0);opacity:1;} 5% { -webkit-transform:perspective(200px) rotateX(0deg) scale(1, 1);} 15% { -webkit-transform:perspective(200px) rotateX(0deg) scale(1, 1);} 20% { -webkit-transform:perspective(200px) rotateX(720deg) scale(0, 0);} 100% { -webkit-transform:perspective(200px) rotateX(720deg) scale(0, 0);opacity:1;} } @keyframes selfrot_p { 0% { transform:perspective(200px) rotateX(-720deg) scale(0, 0);opacity:1;} 5% { transform:perspective(200px) rotateX(0deg) scale(1, 1);} 15% { transform:perspective(200px) rotateX(0deg) scale(1, 1);} 20% { transform:perspective(200px) rotateX(720deg) scale(0, 0);} 100% { transform:perspective(200px) rotateX(720deg) scale(0, 0);opacity:1;} }
CSSのポイント説明
・transform-origin: 50% 50%; 回転の中心をスライド中心に。・animation: selfrot_p 40s ease 8s infinite; トータルanimation時間は40秒、各スライドの表示時間8秒。
・selfrot_h は Y軸中心回転、selfrot_p は X軸中心回転。
・初期状態、perspective(200px) rotateY(-720deg) scale(0, 0);opacity:1; -720deg で2回転を設定。