rotating an object with transform-origin not working in firefox

Question

I have an 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>

And Css I am Applying is:

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

This Animation is working on Chrome but seems transform-origin is not applied in Firefox I have read this but unable to fix this.

Use something other than a percentage e.g. px for the transform-origin units. — Robert Longson, Dec 07 '14 at 11:39
[here](http://mdiary.tk/test/ani.html) is the page where I have added html. — user3452098, Dec 07 '14 at 12:01
@RobertLongson-I tried Adding px but yet its not working so I reverted back,Will you try at your end and see it it works. — user3452098, Dec 07 '14 at 14:31

score 0 · Answer 1 · answered Dec 07 '14 at 11:25

0

You have to add

-moz-

like this:

-moz-transform-origin: some value;

, because of the browser support of Mozilla. Also you should use

-webkit-

for Safari and Chrome.

In this picture you can see, the browser-support of transform-origin

answered Dec 07 '14 at 11:25

1

I have tried adding browser prefix yet its not working. – user3452098 Dec 07 '14 at 11:28
oh, now i see your link you named in your question. There is a problem with "SVG". But there is a nice solution in the question you linked. – Dec 07 '14 at 11:38
1

All browsers support transform-origin without prefixes these days. There may be missing features such as percentage support with SVG elements though. – Robert Longson Dec 07 '14 at 11:39
[here](http://mdiary.tk/test/ani.html) is the page where I have added html. – user3452098 Dec 07 '14 at 12:01

rotating an object with transform-origin not working in firefox

1 Answers1