CSS 旋转超过 225 度时无法正确过渡？

Question

我正在尝试制作一个仅 css 的汉堡包图标，它由旋转 405 度以创建关闭图标的跨度组成。我相信他们正在旋转完整的 405，因为我一直在玩弄这些数字，它完美地工作到 225，但我想我尝试过的任何超过 225 的转换似乎都能找到最快的路线。看起来他们只是旋转了 45 度。

实际上，我对 225deg 很满意，但最终项目有一些在 225deg 时反转的框阴影，因此它必须至少是一个完整的旋转加上 45deg。

我认为 chrome 显示超过 360 度的旋转可能有些怪癖，但当我在 Firefox 和 Safari 上尝试时它看起来是一样的，而且它也在 315 度时进行相同的奇怪过渡。我也用谷歌搜索过是否有其他人遇到过这个问题，但我还没有看到任何人遇到过类似的问题。事实上，this question 的公认答案听起来对他们有用。

你可以在这里看到我的代码：https://jsfiddle.net/ys3pheb1/10/

header input { opacity: 0; }

header input + label {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 30px;

  z-index: 5;
}

header input + label span {
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-top: -1px;
  display: block;
  transition: .5s;
  background-color: #000;
}

header input + label span:first-child {
  top: 0;
}

header input + label span:last-child {
  top: 100%;
}

header label:hover {
  cursor: pointer;
}

header input:checked + label span {
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

header input:checked + label span:first-child {
  opacity: 1;
  transform: rotate(-405deg); /* HERE IS THE FIRST ROTATE */
  transition: all .7s ease;
}

header input:checked + label span:last-child {
  opacity: 1;
  transform: rotate(405deg); /* HERE IS THE SECOND ROTATE */
  transition: all .7s ease;
}

<header>
  <input id="burger" type="checkbox">

  <label for="burger">
    <span></span>
    <span></span>
    <span></span>
  </label>
</header>

提前致谢！

编辑：哦，我还应该提到这是基于 JLNLJN 的代码笔，您可以在这里找到它：https://codepen.io/jlnljn/pen/LkXoBb

我还应该提到原版也有 405 的旋转，这对我来说显示效果很好。

Answer 1

在 span 元素上使用 transform: translate 导致在动画的相同元素上使用 transform: rotate 时出现问题。

您可以使用 position: relative 和 top 来定位元素，而不是使用 translate。

header input {
  opacity: 0;
}

header input+label {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 30px;
  z-index: 5;
}

header input+label span {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  display: block;
  transition: .5s;
  background-color: #000;
  position: relative;
}

header input+label span:first-child {
  top: -6px;
}

header input+label span:last-child {
  top: 6px;
}

header label:hover {
  cursor: pointer;
}

header input:checked+label span {
  opacity: 0;
}

header input:checked+label span:first-child {
  opacity: 1;
  transition: all .7s ease;
  top: 4px;
  transform: rotate(405deg);
}

header input:checked+label span:last-child {
  opacity: 1;
  transition: all .7s ease;
  transform: rotate(-405deg);
  top: -4px;
}

<header>
  <input id="burger" type="checkbox">

  <label for="burger">
    <span></span>
    <span></span>
    <span></span>
  </label>
</header>

CSS 旋转超过 225 度时无法正确过渡？

CSS rotate not transitioning properly over 225deg?

css

rotation

transitions

css-transitions

css-transforms