CSS Transform Rotate работает только в Firefox

Question

Я уже широко искал в Google и Stackoverflow, но не смог найти решение. Я сделал простое мобильное меню с несколькими классными анимациями.

Вот кодовая ручка: Кодовая ссылка

Проблема должна быть в этих строках, но я не понимаю, в чём дело.

.menu a:hover:before {
    right: 100%;
    visibility: visible;
    -webkit-transform: scaleY(1) rotate(360deg);
    transform: scaleY(1) rotate(360deg);
}

Когда вы наводите меню, полосы вращаются (и это работает даже в Chrome и Opera) и меняют цвет. Если вы щелкните по нему, они снова повернутся, чтобы сформировать X (и это работает даже на Chrome и Opera). Когда появляется меню, при наведении на ссылки появляется полоса, которая (должна) вращаться и идти справа налево. Если вы делаете это в Firefox, он работает нормально, полосы ссылок отображаются плавно и вращаются справа налево, если вы делаете это в Chrome или Opera, они просто появляются посередине и идут прямо влево.

Проверьте кодовое поле, я уже вставил ключевые слова браузера (т. Е. -webkit-) и попробовал некоторые опции, но не смог заставить его работать.

Заранее спасибо!

Answer 1

.menu a:before {

  -webkit-transform: scaleY(0) rotate(0deg);
  transform: scaleY(0) rotate(0deg);
  -webkit-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}

.menu a:hover:before {
  right: 100%;
  visibility: visible;
  -webkit-transform: scaleY(1) rotate(360deg);
  transform: scaleY(1) rotate(360deg);
}

работает для меня, если я добавлю rotate (0deg) в состояние «по умолчанию» псевдоэлемента before