本日小作品：
https://codepen.io/linchinhsuan/pen/MWyRLZo

overflow: hidden;
border-bottom: 3px dashed gray;

添加一個簡單的跑道線，讓賽車最後能夠衝過終點線然後消失。

left: 0px;
transition: all .7s .3s ease;

透過絕對定位讓賽車原本在畫面左邊，同時通過transition來製造動畫效果。

transform: rotateY(180deg);
backface-visibility: hidden;
transition: all .5s .5s ease;

將成功的logo轉到背面，然後透過backface-visibility: hidden;讓背面被隱藏起來，加上transition之後把rotateY()的值調整成正面時就會有翻牌翻過來的效果。

var el = document.body;
el.addEventListener("keydown",function(e){
    console.log(e.keyCode);
    if(e.keyCode == "39" ){
        document.querySelector(".smallCar").style.left = "1500px";
        document.querySelector(".success").style.transform = "rotateY(0deg)";
        document.querySelector(".notArrival").style.transform = "rotateY(-180deg)";
    }
},false)

在body上榜定一個keydown事件，當使用者按下不同案件的時候會觸發keydown事件，每個鍵都有其獨特的編號，例如以右方向鍵為例，他的編號是39號。
所以這裡透過一個if判斷式，當e.keyCode（也就是你按的鍵的編號）為39，也就是按下右方向鍵的時候。賽車的絕對定位會被改成1500px，同時成功的logo的transform屬性會改成"rotateY(0deg)"（被轉到正面），反之，另一個logo則被轉到背面同時隱藏起來，完成一個翻牌變色的效果。

－－－

本日結語：
今天是十七天，今天主要是練習keyCode事件，如有寫錯之處麻煩各路高手指教><