jquery - 使用过渡旋转超过 360

Question

这是一个codepen .

单击按钮时，我通过将 :before 和 :after 分别旋转 45 度和 -45 度来切换类 'in-view' 和“条形”转换为“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