轉換超過360轉換

Question

這裏是一個codepen。

單擊按鈕時，通過分別旋轉：before和：45deg和-45deg後，將中間欄變爲透明，同時將類'in-view'和「bars」轉換爲「X」。我認爲在完成這個位置之前旋轉一個額外的360會很酷，（因此我希望他們總共旋轉405度）。但是，它似乎只旋轉45deg仍然？任何想法爲什麼？

<div class="menu-button"> 
    <div></div> 
</div> 

.menu-button div.in-view { 
    background: transparent; 
} 
.menu-button div.in-view:before, 
.menu-button div.in-view:after { 
    top: 0; 
    transform: translateX(-50%) rotate(-405deg); 
    -webkit-transform: translateX(-50%) rotate(-405deg); 
} 
.menu-button div.in-view::after { 
    transform: translateX(-50%) rotate(405deg); 
    -webkit-transform: translateX(-50%) rotate(405deg); 
} 

Answer 1

您需要設置一個開始旋轉值

.menu-button div::before, 
.menu-button div::after { 
    transform: translateX(-50%) rotate(0); /* here */ 
} 

Codepen Demo