3D-回転型スライドショー

CoverFlow 型と同様、rotationY と perspective を使って、奥行きのある回転で複数枚数のスライドを移動させ、正面に来たスライドを鑑賞するタイプのスライドショーである。100 をスライド枚数で割った％を間隔としたanimationを割り付けると、スライドが整然と回転する。

サンプル

本サンプル表示用のHTML

<div id="stage">
    <div id="photo1" class="photo"><img src="wp-images/f1.jpg" width="200" height="200"></div>
    <div id="photo2" class="photo"><img src="wp-images/f2.jpg" width="200" height="200"></div>
    <div id="photo3" class="photo"><img src="wp-images/f3.jpg" width="200" height="200"></div>
    <div id="photo4" class="photo"><img src="wp-images/f4.jpg" width="200" height="200"></div>
    <div id="photo5" class="photo"><img src="wp-images/f5.jpg" width="200" height="200"></div>
    <div id="photo6" class="photo"><img src="wp-images/f6.jpg" width="200" height="200"></div>
</div>

本サンプル表示用CSS

/* 表示領域 */
#stage {
	position:relative;
	width: 600px;
	height: 400px;
	background: #333;
	overflow:hidden;
}
/* スライド共通 */
.photo {
	position: absolute;
	left: 200px;top:100px;
	border:#fff 2px solid;
}
/* 各スライドのanimation設定 */
#photo1 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-15s;
	animation:slidepass 18s infinite;
	animation-delay:-15s;
}
#photo2 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-12s;
	animation:slidepass 18s infinite;
	animation-delay:-12s;
}
#photo3 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-9s;
	animation:slidepass 18s　infinite;
	animation-delay:-9s;
}
#photo4 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-6s;
	animation:slidepass 18s infinite;
	animation-delay:-6s;
}
#photo5 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-3s;
	animation:slidepass 18s infinite;
	animation-delay:-3s;
}
#photo6 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:0s;
	animation:slidepass 18s infinite;
	animation-delay:0s;
}
/* スライドの動きワンサイクル */
@-webkit-keyframes slidepass {
	0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}
@keyframes slidepass {
	0% {transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	10% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	50% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	60% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	93.4% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	100% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}

CSS のスポット解説

・スライド枚数が6枚なので、画面中央を中心として、60°ずつずらした回転角を rotationY で設定すると、６枚のスライドの裏面が中心を向いて円周上に並ぶ。これを、水平方向に回転させると、順番にスライドがこちらを向いて登場する。
・スライドの中心からの距離は、translateZで設定するが、これは全てのスライドで同一値になる。
・animation のワンサイクルは１８秒。３秒間隔でスライドを移動させるが、移動を速くし静止状態を作るように調整している。
・スライドが前面に出てくるときに、perspective値を小さくして（視点を近づけて、1000px -> 750px）、スライドがやや大きく見えるようにしている。