wijnaldumwilliam

13down voteaccepted I was attempting to rotate a simple cog svg graphic around its centre point using a CSS transition. I had the same problem as you with Firefox; transform-origin seemed to have no effect. The solution was to draw the original svg shape so that its centre was at coordinate 0, 0: <svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400"> <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/> </svg> Then add a group around it and translate to the position you want: <svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400"> <g transform="translate(150, 100)"> <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/> </g> </svg> Now you can apply css transitions that should work in Firefox (I add a class to the HTML tag using JavaScript based on a user action (js-rotateObject) and use Minimizr to check that the browser can handle transforms and transitions (.csstransforms.csstransitions): #myObject{ transform: rotate(0deg); transition: all 1s linear; } .csstransforms.csstransitions.js-rotateObject #myObject{ transform: rotate(360deg); }