Question

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

谢谢！

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），则对我有用

CSS转换旋转仅在Firefox上有效

1 个答案: