使用变换原点旋转对象在Firefox中不起作用[重复]答案

【问题标题】：rotating an object with transform-origin not working in firefox [duplicate]使用变换原点旋转对象在Firefox中不起作用[重复]
【发布时间】：2015-02-05 03:59:16
【问题描述】：

我有一个 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 但无法修复此问题。

【问题讨论】：

添加“-moz-”。像这样 -moz-transform-origin: 0% 100%;
试过但没有效果
使用百分比以外的值，例如px 为变换原点单位。
@RobertLongson-即使没有帮助
here 是我添加html的页面。

标签： html css animation svg css-animations

【解决方案1】：

你必须添加

-moz-

像这样：

-moz-transform-origin：一些值；

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

-webkit-

适用于 Safari 和 Chrome。

【讨论】：

我已经尝试添加浏览器前缀但它不起作用。
哦，现在我看到了您在问题中命名的链接。 “SVG”有问题。但是您链接的问题有一个很好的解决方案。
现在所有的浏览器都支持不带前缀的 transform-origin。不过可能缺少一些功能，例如对 SVG 元素的百分比支持。
here是我添加html的页面。