转换超过360转换

这里是一个codepen。转换超过360转换

单击按钮时，通过分别旋转：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); 
}

来源

2016-02-19 DB1500

您需要设置一个开始旋转值

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

Codepen Demo

来源

2016-02-19 17:19:15

传奇！我推测会有一个默认的旋转（0）。 – DB1500

转换超过360转换

回答

相关问题