使用transform-origin旋转对象不能在firefox中工作

Question

我有一个SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42px"
     height="51px" viewBox="0 0 426 513" xml:space="preserve" id="aniBin">
<g id="Bin">
    <g id="cap">
        <path style="fill:#7B7A7A;" d="M414,71H301.916c0.05-0.411,0.084-0.826,0.084-1.25v-55.5c0-0.543-0.055-1.072-0.136-1.592
            c0.081-0.537,0.136-1.083,0.136-1.642v-0.032C302,4.918,297.082,0,291.016,0H135.984C129.918,0,125,4.918,125,10.984v0.032
            c0,0.56,0.055,1.105,0.136,1.642c-0.081,0.52-0.136,1.049-0.136,1.592v55.5c0,0.424,0.034,0.839,0.084,1.25H12
            C5.373,71,0,76.373,0,83v25c0,6.627,5.373,12,12,12h402c6.627,0,12-5.373,12-12V83C426,76.373,420.627,71,414,71z M146,69.75V22
            h135v47.75c0,0.424,0.034,0.839,0.084,1.25H145.916C145.966,70.589,146,70.174,146,69.75z"/>
    </g>
    <g id="bin">
        <rect x="33" y="133" style="fill:#3975B1;" width="362" height="12"/>
        <path style="fill:#3975B1;" d="M383.5,133h-338c-12,0-12.5-0.5-12.5,11.5v356c0,6.627,5.873,12.5,12.5,12.5h338
            c6.627,0,11.5-5.873,11.5-12.5v-356C395,132.5,396.75,133,383.5,133z M91,469H75V179h16V469z M157,469h-16V179h16V469z M221,469
            h-16V179h16V469z M285,469h-16V179h16V469z M348,469h-16V179h16V469z"/>
    </g>
</g>
</svg>

我申请的Css是：

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

此动画适用于Chrome，但似乎transform-origin未在Firefox中应用我已阅读this但无法解决此问题。

Answer 1

你必须添加

  

-moz -

像这样：

  

-moz-transform-origin：some value;

，因为Mozilla的浏览器支持。 你也应该使用

  

-webkit-

适用于Safari和Chrome。