通过过渡旋转超过 360 度答案

【问题标题】：Rotate beyond 360 with transition通过过渡旋转超过 360 度
【发布时间】：2016-02-19 17:11:15
【问题描述】：

单击按钮时，我切换类'in-view' 并且通过将:before 和:after 分别旋转45deg 和-45deg 将“条”转换为“X”，同时使中间条透明。我认为在完成这个位置之前旋转一个额外的 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);
}

【问题讨论】：

标签： jquery css rotation transform

【解决方案1】：

你需要设置一个起始旋转值

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

Codepen Demo

【讨论】：

传奇！我猜想会有一个默认的 rotate(0)。