Question

我正在尝试制作一个仅由css组成的汉堡图标，该图标由可旋转405度的跨度组成，以创建关闭图标。我相信他们一直在旋转405，因为我一直在玩数字游戏，它在225时可以完美运行，但是我想在225上尝试的任何转换似乎都可以找到最快的路线。看起来他们只是在旋转45度。

实际上，我会对225deg感到满意，但是最终项目中有一些箱形阴影在225deg处反转，因此它必须至少旋转一整圈再加上45deg。

我认为镀铬显示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

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

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

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旋转无法在225deg范围内正确过渡？

1 个答案: