transform-origin不工作在firefox [英] transform-origin not working on firefox

问题描述

我想在Firefox上做这个效果，但transfrom-origin无法正常工作，在Firefox上的结果看起来不一样
我想模仿挥动效果， Chrome和Opera以及Vivaldi对于IE我真的不在乎！
感谢

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 effect and its working perfectly in Chrome and Opera and also Vivaldi as for IE i don't really care! Thanks

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

推荐答案

在评论FF有一个不同的解释， transform-origin （至少是我理解它），但我做了一些额外的（快速）研究，因为该评论。链接的文章 https://css-tricks.com/svg-

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使用 50％50

Firefox使用 50％50

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

因此左上角的 Chrome会在Firefox中翻译为 Xpx Ypx ，其中X和Y是转换元素的左上坐标

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.

所以...对于右臂

<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

这篇关于transform-origin不工作在firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！