Html 无法基于中心原点旋转齿轮

我试图制作一个悬停效果，将三个不同的齿轮svg图标旋转到其受人尊敬的中心原点。我尝试使用

变换原点

作为中心，但没有成功。任何帮助都将不胜感激。下面是我的代码

.cog--中间{
变换：旋转（0度）；
过渡：0.3s；
变换原点：中心；
}
svg:hover.cog——中间{
变换：旋转（360度）；
}

ic—卷展

考虑到您试图避免使用

变换框

，实现所需结果的一种方法是使用

百分比

值来处理

变换原点

属性

.cog--中间{
变换：旋转（0度）；
过渡：0.3s；
转化来源：47%34%；
}
svg:hover.cog——中间{
变换：旋转（360度）；
}

JS-Bin
ic—卷展

可以在矢量编辑器中绘制齿轮。但是，虽然很难找到齿轮的精确旋转中心。
如果旋转中心指示不准确，齿轮将用一根豆子旋转

我决定首先选择旋转中心-

100px

并在其周围创建一个齿轮

• 绘制齿轮的外轮廓

当圆的半径

R=60px

时，周长将为

C=2*Pi*R≈2*3.1415927*60=376.98

找出存在24个轮齿时的扇形长度

376,98/24=15,71

公式

stroke dasharray=“7.85 7.85”

---

基本上，有很多方法可以解决这个问题。我不会涵盖所有内容，但按照有效性的顺序，这里有一些：

1）只需使用单独的SVG对象

如果要用纯CSS制作纯SVG的不同部分的动画（没有像Snap.SVG这样的库），不要将所有内容都混合在一个SVG对象中。相反，创建3个对象，每个对象都有单独的

viewBox

。这样你就可以完全控制CSS动画了

svg路径{
变换：旋转（0度）；
过渡期：3s；
变换原点：中心；
}
svg：悬停路径{
变换：旋转（360度）；
}
.齿轮-中间{
位置：绝对位置；
宽度：68.8px；
高度：67.71px；
左：17px；
顶部：0px；
}
.齿轮--左{
位置：绝对位置；
宽度：40.03px；
高度：38.8px；
左：0px；
顶部：60px；
}
.cog--对{
位置：绝对位置；
宽度：40.03px；
高度：38.8px；
左：70像素；
顶部：55px；
}

您需要

转换框：填充框添加<代码>变换框：填充框

到

.cog--middle

我知道

转换框

，但恐怕它与浏览器不兼容。我不是在寻找IE 9，它甚至不支持边缘。然后你需要计算原点，考虑到整个SVGBTW，你的齿轮相对于边界框不是100%完全居中，无论你如何努力改变旋转点。在较高的旋转速度下，它会很明显。我可以知道变换原点值是基于什么计算的吗？@Benjamin将整个SVG添加到SVG中，并基于此进行计算rectangle@Benjamin

变换原点

从元素的左上角计算，左上角为

0，0

和

50%，50%

位于元素的中心点（垂直和水平）。你也可以指定像素值，你可以读到关于它的很好，很漂亮很好的答案！我的建议：在最后的示例中，您可以将按钮移动到顶部，因为有人不会在这个小片段的底部看到它。回答得好！：）有点像旧的机械装置watch@Alexandr_TT我已经为第一点和第三点添加了代码片段，为您提供了一个示例