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

<g id="right-arm" class="arm-wave">
      <rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/>
      <rect id="right-el" **x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
</g>

We would use...

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

JSfiddle Demo