Search code examples
csssvgcss-animationssvg-animate

unable to set transform origin in firefox

I am trying to Create an animation with SVG and CSS3 And it works fine on Chrome but doesn't work on Firefox I have tried adding -moz- prefix to transform-origin: but yet it's not working

here is the live sample I have created

Css Rules I have added is:

#aniBin {
  overflow: visible;
}
#Bin:hover #cap {
  transition-duration: 400ms;
  transform: rotate(-150deg);
  transform-origin:0% 90%;
  -moz-transform-origin:0% 90%;
}
Solution

  • transform-origin is not currently supported with SVG in Firefox if percentages are used as units. Try using pixels:

    transform-origin:0 10px;