CSS 变换旋转仅适用于 Firefox答案

【问题标题】：CSS Transform rotate works only on FirefoxCSS 变换旋转仅适用于 Firefox
【发布时间】：2019-02-21 13:47:35
【问题描述】：

我已经在 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-）并尝试了一些选项，但没有办法让它工作。

提前致谢！

【问题讨论】：

在 Chrome 中对我来说很好。
@JediBurrell 两个动画？如果悬停链接（即主页、关于或联系人），栏会旋转吗？

标签： javascript html css google-chrome webkit

【解决方案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) 添加到之前伪元素的“默认”状态，则对我有用

【讨论】：

谢谢你！它现在工作正常。该死的，只是一个小技巧。再次感谢;D