CSS Transform旋转仅适用于Firefox

Question

我已经在Google和Stackoverflow上广泛搜索过，但找不到解决方案。我用一些很酷的动画制作了一个简单的移动菜单。

这是codepen：Codepen link

问题应该在这些方面，但我不明白什么是错的。

.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上进行，它们只会出现在中间并直接向左移动。

检查codepen，我已经插入了浏览器关键字（即-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);
}

如果我将旋转（0deg）添加到before伪元素的“默认”状态，则对我有用