Question

这是codepen。

点击按钮后，我切换班级'in-view'和＆＃34;栏＆＃34;变成＆＃34; X＆＃34;通过旋转：before和：分别在45deg和-45deg之后，同时使中间条透明。我认为在完成这个位置之前旋转额外的360会很酷（因此我希望它们总共旋转405度）。但是，它似乎只能旋转45度？有什么想法吗？

<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

1 个答案: