CSS 变换旋转仅适用于 Firefox

Question

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

这是代码笔：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 和歌剧）。当菜单出现时，如果您将鼠标悬停在链接上，则会出现一个（应该）旋转并从右向左移动的栏。如果您在 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 伪元素

的 "default" 状态，则对我有用

CSS 变换旋转仅适用于 Firefox

CSS Transform rotate works only on Firefox

html

javascript

css

webkit

google-chrome