使用过渡旋转超过 360

Question

单击按钮时，我将 class 'in-view' 和 "bars" 通过旋转 :before 和 :after 45deg 和 -45deg 转换为 "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

使用过渡旋转超过 360

Rotate beyond 360 with transition

css

jquery

transform

rotation