圖片天然翻轉並切換圖片

如下代碼實現的功能爲圖片翻轉，並切換的功能，最後有一個天然擺動（擺動速度全靠感受），好吧，隨你以爲自不天然，反正我以爲很天然。

貼連接：圖片翻轉切換最最後擺動一下
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座標軸）。