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 で設定すると、6枚のスライドの裏面が中心を向いて円周上に並ぶ。これを、水平方向に回転させると、順番にスライドがこちらを向いて登場する。
・スライドの中心からの距離は、translateZで設定するが、これは全てのスライドで同一値になる。
・animation のワンサイクルは18秒。3秒間隔でスライドを移動させるが、移動を速くし静止状態を作るように調整している。
・スライドが前面に出てくるときに、perspective値を小さくして(視点を近づけて、1000px -> 750px)、スライドがやや大きく見えるようにしている。