Javascript CSS Transform rotate仅适用于Firefox

我已经在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-

），并尝试了一些选项，但无法使其正常工作

提前谢谢

.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伪元素的“默认”状态，则对我有效。

在Chrome中对我有效。@jedburrell这两个动画都有效吗？如果你悬停一个链接（即主页、关于或联系），该条是否会旋转？谢谢你，伙计！现在很好用。该死，只是个小把戏。再次感谢你；D