今天明天要來寫純CSS可控制的按鈕分身術
感謝室友的idea提供~

之前在重寫網站時的首頁按鈕也是類似的效果
只要把改變的位置更改就能做出不同的樣子了

今天的部分著重在控制按鈕的漢堡圖樣變化

先寫架構
跟Day10一樣用checkbox做開關，打開時出現按鈕，關掉時按鈕隱藏

寫一個input跟一個label，幫input設置id，label設置for綁定input的id
綁定完成後點擊label也能開關input

<input class="menu-check" type="checkbox" id="menu-check" />
<label class="menu-open-button" for="menu-check">label</label>

綁定完成後我們就能把input設display: none; 隱藏起來
然後我先幫label加一些圖樣
預想是平常是漢堡圖樣☰，打開時是叉叉圖樣✖
因為我沒有要用到JS，所以要在CSS自己寫圖樣
先在label內設置一個div，因為漢堡圖樣是三橫槓，所以要在div裡面加上三個span

<div class="ham">
    <span></span>
    <span></span>
    <span></span>
</div>

然後進入CSS
幫span的父層ham設一個大小讓span比較好長大

.ham {
    width: 60px;
    height: 60px;
}

先寫span共同的部分
長寬跟顏色是大家都一樣的東西就設在一起

.ham span {
    position: absolute;
    height: 6px;
    width: 100%;
    background: #1FAF87;
}

各自的部分，因為我們沒設class分別，就直接用CSS的:nth-child()
第一個長在最高，第二個中間，第三個最低

.ham span:nth-child(1) {
    top: 0%;
}
.ham span:nth-child(2) {
    top: 50%;
}
.ham span:nth-child(3) {
    top: 100%;
}

然後來寫變化
變化的部分用:checked來辨別，當.menu-check:checked時去做改變
上面跟下面的橫槓要各自順跟逆時針轉45度，變成叉叉的兩槓，中間那槓隱藏起來就可以了

.menu-check:checked+.menu-open-button span:nth-child(1) {
    transform: rotate(45deg);
}
.menu-check:checked+.menu-open-button span:nth-child(2) {
    transform: scaleX(0);
}
.menu-check:checked+.menu-open-button span:nth-child(3) {
    transform: rotate(-45deg);
}

完成後點擊就會有變化了

但我們發現改變後的位置有點怪怪的，因為預設的旋轉基準點是在圖的正中心
我們需要把改變位置改到左邊的中間，讓上下各自以左邊為旋轉中心做旋轉
在共同處新增一個改變旋轉中心的語法

.ham span{
    transform-origin: left center;
}

然後我們又發現，叉叉的腳好像有一點點短，因為旋轉後的槓槓，如同三角形的斜邊，而斜邊的長度一定會大於兩邊的長，所以我們需要讓他在改變後長長一點點，這邊看大家設置的三條槓槓距離是多少會有所不同，我是變成140%左右

接著根據需要美化一下，我這邊有把長寬跟位置做一些改變，變成我希望的比例
最後在.ham span加上transition: 0.25s ease-in-out; 讓變化時有轉場的效果

這樣便完成漢堡圖樣的變化了