Menu
I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.
It works fine in Chrome.
http://codepen.io/chrismorrison/pen/rmLXWw
#rays {
animation: spin 6s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
}
@keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
861
asked Apr 26 '17 18:04
Definition and Usage The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.
The default value of the transform origin is at 50% 50%, which is exactly the center of any given element. The transform-origin can be specified using offset keywords, length values, or percentage values.
I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.
147
answered Nov 15 '22 08:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With