Cover Flow Type の Slide SHow である。以下に示すように、非常にシンプルなCSSのコードで、このようなスライドショーを作成できるとは。CSS animation もかなりのものである。ここでは、perspective とか rotationY とかのプロパティーが有力な武器となっているが、Flashのactionscript 3.0 に匹敵する機能といえよう。
ここでは、６枚のスライドが使われていて、この枚数が表示に調度よい枚数ではあるが（６枚以下では空きができる）、もっと多くのスライドを表示したい場合は、Stageの外で待機させることで作成可能である。

サンプル

本サンプル表示用HTML

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

本サンプル表示用CSS

/* 表示領域 */
#stage {
	position:relative;
	width: 600px;
	height: 400px;
	background: #333;
	overflow:hidden;
}
/* スライド共通 */
.photo {
	position: absolute;
	left: 150px;top:50px;
	border:#fff 2px solid;
	z-index:-1;
}
/* 各スライドのanimation設定 */
#photo1 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-9s;
	animation:slidepass 18s infinite;
	animation-delay:-9s;
}
#photo2 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-6s;
	animation:slidepass 18s infinite;
	animation-delay:-6s;
}
#photo3 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-3s;
	animation:slidepass 18s infinite;
	animation-delay:-3s;
}
#photo4 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-0s;
	animation:slidepass 18s infinite;
	animation-delay:0s;
}
#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:6s;
	animation:slidepass 18s infinite;
	animation-delay:6s;
}
/* スライドの動きワンサイクル */
@-webkit-keyframes slidepass {
	0% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;}
	10% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
	16.7% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
	26.7% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
	33.3% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
	43.3% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
	50% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
	60% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
	66.7% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
	76.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
	83.4% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
	93.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
	100% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
}
@keyframes slidepass {
	0% {transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;}
	10% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
	16.7% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
	26.7% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
	33.3% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
	43.3% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
	50% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
	60% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
	66.7% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
	76.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
	83.4% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
	93.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
	100% {transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
}

CSSのスポット解説

・６枚のスライドが一斉に移動し、中央に来た時に全面表示にする。animation ワンサイクルの時間は１８秒で、３秒ずつずらして各スライドのanimationを再生させる。
・animationは、移動、静止の繰り返しを設定している。
・全面表示でないスライドの横幅はrotateY で狭くし、遠近感（奥になるほど高さを短く）は perspective プロパティーで実現している。