css3 弹性效果上下翻转demo

最近扒了一个有弹性效果上下翻转demo

上图：

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    @-webkit-keyframes show
    {
        0%   {
                transform:rotateX(180deg);
                opacity:0;
             }
        50%   {
                transform:rotateX(-25deg);
                opacity:1;
             }
        60%   {
                transform:rotateX(18deg);
                opacity:1;
             }
        70%   {
                transform:rotateX(-13deg);
                opacity:1;
             }
        80%   {
                transform:rotateX(8deg);
                opacity:1;
             }
        90%   {
                transform:rotateX(-6deg);
                opacity:1;
             }
        100% {
                transform:rotateX(0deg);
                opacity:1;
             }
    }
    @-webkit-keyframes hide
    {
        0%   {
                transform:rotateX(0deg);
                opacity:1;
             }
        
        100% {
                transform:rotateX(-180deg);
                opacity:0;
             }
    }
    *{ margin:0; padding:0;}
    li{ list-style: none;}
    .box{ position:relative;  width:300px; height:200px; margin:100px auto; }
    .box-ul,.box li{width:300px; height:200px;}
    .box-ul{transform-style:preserve-3d;perspective:800px;}
    .box li{ position:absolute;  background-size:cover; background-position:-50% -50%;transform:rotateX(180deg);transform-origin:bottom ; opacity:0;}
    .box li.show{-webkit-transform:rotateX(0deg);-webkit-animation: show .6s; opacity:1;}
    .box li.hide{-webkit-transform:rotateX(180deg); -webkit-animation: hide .6s;opacity:0;}
    .box a{ position:absolute; top:50%;transform: translateY(-50%) ; width:50px; height:50px; line-height: 50px; font-size: 14px; text-decoration: none; color:#fff; text-align:center; border-radius:50%; background-color:red;}
    .box a:nth-of-type(1){left:-80px;}
    .box a:nth-of-type(2){right:-80px;}

    
    </style>
    <script>
    window.onload = function(){

        var aA = document.getElementsByTagName('a'),
            aLi = document.getElementsByTagName('li');
        var len = aLi.length-1,
            n = 0;

        aA[0].onclick = function(){
            aLi[n].className = "hide";
            n--;
            n = n < 0 ? len : n;
            aLi[n].className = "show";
        }
        aA[1].onclick = function(){
            aLi[n].className = "hide";
            n++;
            n = n > len ? 0 : n;
            aLi[n].className = "show";
        }

    }
    </script>
</head>
<body>
    <div class="box">
        <ul class="box-ul">
            <li class="show" style=" background-image:url(1.jpg)"></li>
            <li style=" background-image:url(2.jpg)"></li>
            <li style=" background-image:url(3.jpg)"></li>
            <li style=" background-image:url(4.jpg)"></li>
            <li style=" background-image:url(5.jpg)"></li>
        </ul>
        <a href="javascript:;">上一张</a>
        <a href="javascript:;">下一张</a>
    </div>
</body>
</html>

演示：demo

扒代码心得：

初次看到这个效果感觉主要是JS做的

因为翻转上来有弹性运动，直接想的是JS弹性运动不知道CSS3也可是设置当时仅仅知道 transition 过去也知道 animation 仅仅理解成从 A点到B点

用 ul 用css3 转成 3D （transform-style:preserve-3d）同时加上景深 perspective:800px; （张鑫旭大神对景深的解释：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ）我个人简单粗暴的理解就是：给了一个三维的视角，

rotateX，rotateY,rotateZ 就能 X轴、Y轴、Z轴 设置3D了，换句话说不加其实还是2D平面。

li 初始X轴旋转 transform:rotateX(180deg) 在设置旋转的基点 根据li的底边旋转 （transform-origin:bottom）；
然后 分别 有两个 class 分别 show(翻转上来)、hide(翻转下去)；同时也写两个 animation 对应 keyframes show,keyframes hide

.show：虽然有keyframes show 运动 但是最后还要设置它的运动的最终点 transform:rotateX(0deg)；
.hide:同理

keyframes show 是从 180deg 到 0deg 然后 弹性运动 其实就是 在 50% 的时候 运动 -25deg 10%的频率 来回的设置 deg 达到 弹性的运动，最开始一直这只不好，仔细看别人的代码发现是有规律逐次减少deg，

keyframes hide 仅仅是从 transform:rotateX(0deg); 到 transform:rotateX(-180deg); 同时还有透明度；

剩下的就是 JS 切换给class