轮播图2.0(立方体)

还记得上一篇的轮播图吗？用的是可见域的滑动截取，但是这样的有一个弊端，就是不连贯，当轮播结束时，应该继续播下一张，而它却没有，所以啊，可以用立方体来实现这个效果，可以说是轮播图2.0。

这是两篇相关文章的链接轮播图1.0
立方体

<!--html-->
<div id="box">
	<div id="pic">
			<div id="one"><img src="images/1.jpg" alt="图片"></div>
            <div id="two"><img src="images/2.jpg" alt="图片"></div>
            <div id="three"><img src="images/3.jpg" alt="图片"></div>
            <div id="four"><img src="images/4.jpg" alt="图片"></div>
	</div>
</div>

/*CSS*/
* {
    padding: 0;
    margin: 0;
}
html,body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#box,#pic,#pic>div,#piv div img {
    width: 200px;
    height: 126px;
}
#pic>div{
    transform-style: preserve-3d;
    position: absolute;
    transform-origin: center center;
}
#box{
    overflow: hidden;
}
#pic {
    position: relative;
    transform-style: preserve-3d;
    animation: show 12s linear 0s infinite normal none;
}
@keyframes show {
    0%,15%{ transform: rotateY(0);}
    20%,35%{ transform: rotateY(90deg);}
    40%,55%{ transform: rotateY(180deg);}
    60%,75%{ transform: rotateY(270deg);}
    80%,100%{ transform: rotateY(360deg);}
}
#one{
    transform: translateZ(100px);
}
#two {
    transform:  translateX(100px) rotateY(90deg);
}
#three{
    transform:  translateZ(-100px) rotateY(180deg);
}
#four {
    transform:  translateX(-100px) rotateY(-90deg);
}