javascript - CSS 变换旋转仅适用于 Firefox

Question

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

这是代码笔: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);
}

如果我将 rotate(0deg) 添加到 before 伪元素的“默认”状态，则对我有用