CSS 3D 透視動畫：環場視覺

[不惑仔]

CSS 環場透視效果

參考→展示

有人問到這個怎麽做，時間…有限…，暫無法詳述製作原理；把原碼放上來，有問題直接在這討論嘍！

html 片段

<section id="perspective-3d-animation">
<ul>
 <li><a href="?"><img src="pic1.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic2.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic3.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic4.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic5.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic6.jpg" alt=""></a></li>
 <li><a href="?"><img src="pic7.jpg" alt=""></a></li>
</ul>
</section>

css 片段

a img{
 border:none;
}
*#perspective-3d-animation{
 height:400px;
}
*#perspective-3d-animation ul{
 list-style:none;
 margin:0;padding:0;
 position:relative;
 margin-left:51%;top:128px;
 -webkit-perspective:1200px;
 -webkit-perspective-origin:0;
 -webkit-animation-name:swing;
 -webkit-animation-duration:40s;
 -webkit-animation-delay:0.5s;
 -webkit-animation-iteration-count:infinite;
 perspective:1200px;
 perspective-origin:0;
 animation-name:swing;
 animation-duration:40s;
 animation-delay:0.5s;
 animation-iteration-count:infinite;
}
*#perspective-3d-animation li{
 position:absolute;
 left:-80px;top:-51px;
 -webkit-transform-origin:50% 50% 400px;
 -webkit-transform:rotateY(0deg);
 -webkit-animation-duration:0.5s;
 -webkit-animation-fill-mode:both;
 transform-origin:50% 50% 400px;
 transform:rotateY(0deg);
 animation-duration:0.5s;
 animation-fill-mode:both;
}
*#perspective-3d-animation li:nth-child(2){
 -webkit-animation-name:encircle2;
 -webkit-animation-delay:3.5s;
 animation-name:encircle2;
 animation-delay:3.5s;
}
*#perspective-3d-animation li:nth-child(3){
 -webkit-animation-name:encircle3;
 -webkit-animation-delay:3s;
 animation-name:encircle3;
 animation-delay:3s;
}
*#perspective-3d-animation li:nth-child(4){
 -webkit-animation-name:encircle4;
 -webkit-animation-delay:2.5s;
 animation-name:encircle4;
 animation-delay:2.5s;
}
*#perspective-3d-animation li:nth-child(5){
 -webkit-animation-name:encircle5;
 -webkit-animation-delay:2s;
 animation-name:encircle5;
 animation-delay:2s;
}
*#perspective-3d-animation li:nth-child(6){
 -webkit-animation-name:encircle6;
 -webkit-animation-delay:1.5s;
 animation-name:encircle6;
 animation-delay:1.5s;
}
*#perspective-3d-animation li:nth-child(7){
 -webkit-animation-name:encircle7;
 -webkit-animation-delay:1s;
 animation-name:encircle7;
 animation-delay:1s;
}
*#perspective-3d-animation li a{
 display:block;
 border:solid 2px white;
 box-shadow:0 0 1px 2px hsla(0,0%,0%,0.2);
}
*#perspective-3d-animation li img{
 vertical-align:middle;
 width:160px;
}
@-webkit-keyframes swing{
 from{
    -webkit-perspective-origin:0;
 }
 25%{
    -webkit-perspective-origin:160px;
 }
 50%{
    -webkit-perspective-origin:0;
 }
 75%{
    -webkit-perspective-origin:-160px;
 }
 to{
    -webkit-perspective-origin:0;
 }
}
@keyframes swing{
 from{perspective-origin:0;}
 25%{perspective-origin:160px;}
 50%{perspective-origin:0;}
 75%{perspective-origin:-160px;}
 to{perspective-origin:0;}
}
@-webkit-keyframes encircle7{
 to{
    -webkit-transform:rotateY(24deg);
 }
}
@-webkit-keyframes encircle6{
 to{
    -webkit-transform:rotateY(-24deg);
 }
}
@-webkit-keyframes encircle5{
 to{
    -webkit-transform:rotateY(48deg);
 }
}
@-webkit-keyframes encircle4{
 to{
    -webkit-transform:rotateY(-48deg);
 }
}
@-webkit-keyframes encircle3{
 to{
    -webkit-transform:rotateY(72deg);
 }
}
@-webkit-keyframes encircle2{
 to{
    -webkit-transform:rotateY(-72deg);
 }
}
@keyframes encircle7{
 to{
    transform:rotateY(24deg);
 }
}
@keyframes encircle6{
 to{
    transform:rotateY(-24deg);
 }
}
@keyframes encircle5{
 to{
    transform:rotateY(48deg);
 }
}
@keyframes encircle4{
 to{
    transform:rotateY(-48deg);
 }
}
@keyframes encircle3{
 to{
    transform:rotateY(72deg);
 }
}
@keyframes encircle2{
 to{
    transform:rotateY(-72deg);
 }
}

參考→實際展示

--

生 命沒有公式。天，不會定規則。～不惑仔