css - 转换原点不适用于 Firefox

Question

我试图在 Firefox 上实现这种效果，但“transfrom-origin”无法正常工作，而且在 Firefox 上的结果看起来大不相同。我想模仿挥动效果及其在 Chrome 和 Opera 以及 Vivaldi 中的完美工作，至于 IE，我真的不在乎!谢谢

 .arm-wave 
          {
          -webkit-transform-origin: top left;
          -webkit-animation: wave 2s ease-in-out infinite;
          -moz-animation: wave 2s ease-in-out infinite;
          -o-transform: wave 2s ease-in-out infinite;
          transform: wave 2s ease-in-out infinite;
          -ms-transform: wave 2s ease-in-out infinite;
         }
@-webkit-keyframes wave  
          {
     0% {-webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
          }
     20% {-webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     40% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:  rotate(-160deg) translate(-23px);
         }
     60% {
          -webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     80% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:     rotate(-160deg) translate(-23px);

        }

   100% {
         -webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
     }
 @-moz-keyframes wave {

    0% {
        -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
   20% {
       -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
       }
  40% {
       -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);

      }
  60% {
      -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
      }
  80% {
      -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);
    }
 100% {
     -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
      }
   }

这是 HTML 部分:

    <div id="my-svg-shape"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="591.1px"
     height="768px" viewBox="0 0 591.1 768" style="enable-background:new 0 0 591.1 768;" xml:space="preserve">
  <g id="shape">
<rect id="body" x="215.6" y="240.6" class="sweater-color" width="133.7" height="230.9"/>
    <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>
    <g id="left-arm">
      <rect id="left-el" x="143.2" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
      <rect id="left-hand" x="143.2" y="403.9" class="skin-color" width="46.5" height="16.8"/>
    </g>


  </g>
  </svg> </div>

http://jsfiddle.net/rizkallah/wxs0v9gx/1/

Answer 1

我在评论中提到 FF 对 transform-origin 有不同的解释(至少据我所知)，但自该评论以来我已经做了一些额外的(快速)研究。链接文章https://css-tricks.com/svg-animation-on-css-transforms/拥有丰富的信息。

Chrome 使用 50% 50 与正在转换的对象 的中心相关。

Firefox 使用 50% 50% 与 SVG parent 的中心相关。

因此，Chrome 的 top left 将在 Firefox 中转换为 Xpx Ypx，其中 X 和 Y 是转换元素.

所以...对于右臂

<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>

我们会用...

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

JSfiddle Demo