如何将360滚动到svg组的中心？

Question

我在Codepen上做了一个演示

我在那里有一个齿轮，我希望它坐在一张纸后面时相对于其中心旋转（例如轮式车辆），但是当我编写CSS属性（例如，使轮子相对于中央SVG旋转）时， ，告诉我如何只为齿轮固定transform-origin属性，以便它就位并旋转？

Answer 1

尝试一下 1）如果要对元素进行变换原点，则应首先使用transform-b​​ox：fill-box作为

#wheel
{ 
  .....   
  transform-origin: 50% 50%;
  transform-box:fill-box;
}

2）如果您希望它相对于父级svg可以使用。在这种情况下，您必须调整值以找到确切位置

#wheel{
   ....
   ....
   transform-origin: 29% 49%;
}