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

<div class="img">
    <img src="........" class="littleTree">
    <img src="........" alt="大樹" class="bigTree">
    <img src="........" alt="地表" class="land">
</div>

.tree img{
    position: absolute;
    backface-visibility: hidden;
}
.land,.bigTree{
    transform: rotateY(-180deg);
}

最核心的三張圖，透過以上的css，以絕對定位的方式讓三張圖在同一個位置上。同時，將其中的兩張透過transform翻到背面去，再透過backface-visibility: hidden;讓翻過去的圖片隱藏起來。所以此時即使是三張圖疊在一起，使用者也只能看到樹苗而已。

document.querySelector('.rain').addEventListener('click',rain,false);
document.querySelector('.tornado').addEventListener('click',tornado,false);

在兩個圖片上綁定點擊事件。

function rain(){
    if(littleTree.className !== 'littleTree'){return};
    littleTree.className = 'clickRain';
    document.querySelector('.bigTree').style.transform = 'rotateY(0deg)';
    str.textContent = '恭喜！長成大樹了！';
};
function tornado(){
    if(littleTree.className !== 'littleTree'){return};
    littleTree.className = 'clickRain';
    document.querySelector('.land').style.transform = 'rotateY(0deg)';
    str.textContent = '糟糕！被吹壞了！';
};

if用來判斷當圖片是小樹苗的時候則會跑程式碼，不然樹都被吹壞了，再點下雨然後變成大樹會顯得很奇怪。
透過js動態改變小樹的class，當其套用clickRain時，會觸發css，轉180度隱藏到背面去。
同時，透過js動態改變大樹或是土地其中一張圖的transform屬性，來達到翻轉的效果。
至於動畫則透過css的transition達到。
兩者同時翻轉就有翻牌的動畫感，最後則是把文字寫上去。

－－－

備註：
icon圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是二十六天，進入了最後五天！打算進入綜合練習的部分，這幾天都會是沒有特地練習某一個（例如Day20是練習js的localStorage）東西，以小作品的形式（點題）衝刺最後五天！如有寫錯之處麻煩各路高手指教><