How to make scroll 360 relative to the center of an svg group?

Question

css

Hello, I posted a demo
https://codepen.io/untca/pen/NeyroK?editors=1100
I have a gear there, I want it to spin relative to its cent (like a car wheel), while behind a piece of paper, but when I I assign css properties to the #wheel element, then I get that it is spinning relative to the center of the ENTIRE SVG, tell me how to fix this, how to make the transform-origin property work only for the gear, so that it stays in place and just spins?

Answer 1

transform-box: fill-box;