transform-origin not working on firefox

Question

I\'m trying to make this effect on Firefox but \"transfrom-origin\' is not working properly, and the result on Firefox it looks way different. I want to imitate the waving effec

Answer 1

A I mentioned in the comments FF has a different interpretation of transform-origin (at least as i understand it) but I've done some extra (quick) research since that comment. The linked article https://css-tricks.com/svg-animation-on-css-transforms/ has a wealth of information.

Chrome uses 50% 50 to be related the the center of the object being transformed.

Firefox uses 50% 50% to be related to the center of the SVG parent.

Therefore top left for Chrome would translate in Firefox to Xpx Ypx where X and Y are the top left co-ordinates of the transformed element.

So...for the right arm

We would use...

transform-origin: 375.6px 249.8px;
-webkit-transform-origin: top left;

JSfiddle Demo