图片自然翻转并切换图片

以下代码实现的功能为图片翻转，并切换的功能，最后有一个自然摆动（摆动速度全靠感觉），好吧，随你觉得自不自然，反正我觉得很自然。

贴链接：图片翻转切换最最后摆动一下
CSS样式

.front {
    z-index: 2;
}
/*设置大小*/
.bgtest{
    height: 120px;
    width: 192px; }
/*.flip-container,*/
.flipper,.front, .back {            
    height: 120px;
    width: 192px;
}

/* 翻转效果 */
.flipper {
    perspective: 1000px ;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.flipper:hover > .front {
    background-color: rebeccapurple;
    transform: rotateY(180deg);
    backface-visibility: hidden;

}
/*反转后抖动*/
.flipper:hover > .back{
    transform: rotateY(180deg);
    backface-visibility: visible;
    -webkit-animation:shake 1.5s  0.5s;
    animation:shake 1.5s  0.5s;
}

/* 隐藏后面的内容 */
.front, .back {
    transition: all 0.6s ease 0s;
    backface-visibility: hidden;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;

}
/*摆动的动画，通过transform的rotateY实现动画，完全没有什么数学公式，凭着感觉走，永远不会错*/
@keyframes shake{
    0%{
        -webkit-transform:rotateY(202deg);
        transform: rotateY(202deg);
    }
    10%{
        -webkit-transform: rotateY(158deg) ;
        transform: rotateY(158deg);
    }
    20%{
        -webkit-transform:rotateY(196deg);
        transform: rotateY(196deg);
    }
    30%{
        -webkit-transform:rotateY(164deg) ;
        transform: rotateY(164deg);
    }
    40%{
        -webkit-transform:rotateY(190.5deg) ;
        transform: rotateY(190.5deg);
    }
    50%{
        -webkit-transform:rotateY(169.5deg) ;
        transform: rotateY(169.5deg) ;
    }
    60%{
        -webkit-transform:rotateY(186.5deg);
        transform: rotateY(186.5deg) ;
    }
    70%{
        -webkit-transform:rotateY(173.5deg);
        transform: rotateY(173.5deg) ;
    }
    80%{
        -webkit-transform: rotateY(183.5deg);
        transform: rotateY(183.5deg) ;
    } 90%{
        -webkit-transform:rotateY(176.5deg);
        transform: rotateY(176.5deg) ;
    }
    100%{
        -webkit-transform:rotateY(180deg);
        transform: rotateY(180deg);

    }

}

Html代码

<div class="flipper">
    <div class="front">
        <!-- 前面内容 -->
        <img class="bgtest " src="学习0.jpg">
    </div>
    <div class="back">
        <!-- 背面内容 -->
        <img class="bgtest " src="clock-1461689_640.jpg">
    </div>
</div>

因为大佬让写这个动画，所以顺便学习了一下几个动画
基础知识
perspective(透视的） ： 镜头到元素平面的距离。所有元素都放置在z=0的平面， perspective(200px),则镜头到平面距离为200px.
就像你有个望远镜，望远镜看到的距离。
perspective-origin: 属性规定了镜头在平面上的位置。默认是放在元素的中心。这个就是调望远镜的角度（相对x,y坐标轴）。