Поворот CSS не выполняется должным образом в течение 225 градусов? - PullRequest
Новая
       39

Поворот CSS не выполняется должным образом в течение 225 градусов?

0 голосов
/ 26 июня 2018

Я пытаюсь сделать иконку гамбургера только для css из промежутков, которые вращаются на 405 градусов, чтобы создать иконку закрытия.Я полагаю, что они вращают полные 405, так как я играл с числами, и он отлично работает до 225, но переходы для всего, что я пробовал за 225, похоже, находят самый быстрый маршрут, я полагаю.Похоже, они просто вращаются на 45 градусов.

На самом деле я был бы счастлив с 225 градусами, но в финальном проекте есть некоторые тени от ящиков, которые становятся инвертированными при 225 градусах, поэтому это должен быть как минимум один полный оборот плюс 45 градусов.

Я подумал, что это может быть какая-то странность с хромом, отображающим повороты на 360 градусов или что-то в этом роде, но он выглядит так же, когда я пробую его в Firefox и Safari, и он также делает тот же странный переход на 315 градусов.Я также погуглил, чтобы увидеть, была ли у кого-нибудь еще эта проблема, и я не видел никого с подобными проблемами там.Фактически, принятый ответ на этот вопрос делает его звучащим так, как будто он работает для них.

Вы можете увидеть мой код здесь: 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, что для меня отлично.

1 Ответ

0 голосов
/ 26 июня 2018

Использование 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>
...