transform-origin not working in Firefox even properties in percentage value

Question

CSS3 transform-origin not working in firefox browser.

I am trying to run transform: rotate(360deg); in @keyframes for &

Answer 1

To summarise the comments you have been getting:

1. The transform-origin property with percentage values on SVG elements has been broken in Firefox, and has only just been fixed/implemented.

2. The meaning of transform-origin: 50% 50% when applied to SVG elements has not been fully specified until recently. Chrome used the centre of the element's bounding box. Firefox uses the centre of the SVG.

3. How percentage origins are to be calculated has only recently been decided. There is a new property called transform-box. See: https://drafts.csswg.org/css-transforms/#transform-box

The default value of transform-box for SVG elements is view-box (typically the centre of the whole SVG). However Chrome currently uses the equivalent of fill-box.

In summary, you should not rely on Chrome's behaviour. It is probably going to change to match what is specified by the new transform-box property.

If you want to have your SVG work now on both browsers, don't use percentage values in transform-origin. Use absolute coordinates. See example below.

.tyreA {
  -webkit-transform-origin: 71.59px 43.42px;
  -moz-transform-origin: 71.59px 43.42px;
  transform-origin: 71.59px 43.42px;
  transform: rotate(0);
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

.tyreB {
  -webkit-transform-origin: 19.83px 43.39px;
  -moz-transform-origin: 19.83px 43.39px;
  transform-origin: 19.83px 43.39px;
  transform: rotate(0);
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

.tyreC {
  -webkit-transform-origin: 51.2px 43.39px;
  -moz-transform-origin: 51.2px 43.39px;
  transform-origin: 51.2px 43.39px;
  transform: rotate(0);
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  from   { transform: rotate(360deg); }
  to  { transform: rotate(0deg); }
}
@keyframes spin {
  from   { transform: rotate(360deg); }
  to  { transform: rotate(0deg); }
}

In the future, you will be able to do:

transform-origin: 50% 50%;
transform-box: fill-box;

But not until transform-box is supported properly in all browsers.