表示写真が、遠近回転しながら縮小・拡大して写真を切り替えるタイプのスライドショーである。 各写真の、animation をずらして play させることによって写真の切り替えを行う。遠近は、transform:perspective、Y軸中心回転は rotateY、X軸中心回転は rotateX を使う。

サンプル

本サンプル表示用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回転を設定。