October
23

2017

cssを使って、3D回転するスライドショーを作ってみましょう。

それでは、ソースサンプルとデモページをご覧ください。

▼以下が実際のソースサンプルです。
▼CSS


h1{
    padding: 10px;
}
#roll {
    position:relative;
    top:20px;
    left: 5%;
    width: 600px;
    height: 400px;
    background: #339933;
    overflow:hidden;
}
.photo {
    position: absolute;
    left: 200px;top:100px;
}
#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;}
}
 


▼HTML

    <div id="roll">
    <div id="photo1" class="photo"><img src="./photo/ajisai.jpg" width="200" height="200"></div>
    <div id="photo2" class="photo"><img src="./photo/chamomile.jpg" width="200" height="200"></div>
    <div id="photo3" class="photo"><img src="./photo/clover.jpg" width="200" height="200"></div>
    <div id="photo4" class="photo"><img src="./photo/cosmos.jpg" width="200" height="200"></div>
    <div id="photo5" class="photo"><img src="./photo/sunflower.jpg" width="200" height="200"></div>
    <div id="photo6" class="photo"><img src="./photo/tulip.jpg" width="200" height="200"></div>
</div>
 


今回、参考にさせていただいたのは、
『css だけで作る フォトギャラリー・スライドショー』さんです。
ありがとうございます。

デモページは、こちら