Search code examples
javascripthtmlcssgoogle-chromewebkit

CSS Transform rotate works only on Firefox

I already widely searched on Google and Stackoverflow, but couldn't find a solution. I made a simple mobile menu with some cool animations.

Here is the codepen: Codepen link

The problem should be in these lines, but I don't understand what's wrong.

.menu a:hover:before {
    right: 100%;
    visibility: visible;
    -webkit-transform: scaleY(1) rotate(360deg);
    transform: scaleY(1) rotate(360deg);
}

When you hover the menu, the bars rotate (and it works even on chrome and opera) and change color. If you click it, they rotate again to form a X (and it works even on chrome and opera). When the menu appears, if you hover the links there's a bar that (should) rotate and go from right to left. If you do it in Firefox it works fine, the bars on the links appears smoothly and rotate from right to left, if you do it on Chrome or Opera, they just appear in the middle and go straight to the left.

Check the codepen, I already inserted browser keywords (i.e. -webkit-) and tried some options but no way to make it working.

Thanks in advance!

Solution 
  • .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);
}

    works for me if i add rotate(0deg) to the "default" state of the before pseudo element