Css 简单的旋转悬停效果不起作用

我试图创建一个简单的效果，这样当我在最里面的圆圈上悬停时，两个外圈会旋转来创建一个很酷的效果。我认为这将是一项简单的任务，但我似乎无法找出我做错了什么。当我将鼠标悬停在内圈上时，所有的变化都是两个内圈朝屏幕右下角移动，根本不旋转。我错过了什么？谢谢

.wrapper{
位置：相对位置；
宽度：400px；
高度：400px；
保证金：自动；
背景：黑色；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
背景颜色：灰色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.圆圈-1{
宽度：108px；
高度：108px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界：2px；
边框样式：实心；
边框颜色：白色透明；
过渡：1.5s，全部轻松进出；
}
.圆圈-2{
宽度：118px；
高度：118px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界：2px；
边框样式：实心；
边框颜色：白色透明白色；
过渡：1.5s，全部轻松进出；
}
.circle:悬停。circle-2{
变换：旋转（360度）；
}
.圆圈：悬停。圆圈-1{
变换：旋转（-360度）；
}

---

在

：hover

中设置

transform

属性将覆盖现有的

transform

属性，因此您需要在

：hover

版本中包含

translate

变换，以避免在设置旋转过程中移动圆

如果希望旋转设置动画，还需要为旋转变换设置初始值

另一个注意事项：使用

转换

，旋转只会发生一次。如果希望重复旋转，则需要使用动画（可以通过取消片段中

动画

行的注释来实现）

演示：

.wrapper{
位置：相对位置；
宽度：400px；
高度：200px；
保证金：自动；
背景：黑色；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
背景颜色：灰色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.圆圈-1{
宽度：108px；
高度：108px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（0度）；
边界：2px；
边框样式：实心；
边框颜色：白色透明；
过渡：1.5s，全部轻松进出；
}
.圆圈-2{
宽度：118px；
高度：118px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（0度）；
边界：2px；
边框样式：实心；
边框颜色：白色透明白色；
过渡：1.5s，全部轻松进出；
}
.circle:悬停。circle-2{
/*动画：旋转1.5s无限线性*/
变换：平移（-50%，-50%）旋转（360度）；
}
.圆圈：悬停。圆圈-1{
/*动画：旋转1.5s无限线性反转*/
变换：平移（-50%，-50%）旋转（-360度）；
}
@关键帧旋转{
0% {
变换：平移（-50%，-50%）旋转（0度）；
}
100% {
变换：平移（-50%，-50%）旋转（360度）；
}
}

---

您正在使用带平移的

变换

以使元素居中，然后您正在使用创建问题的旋转覆盖变换。相反，您可以调整

顶部

/

左侧

值以居中并避免使用变换，然后您将获得所需的旋转：

.wrapper{
位置：相对位置；
宽度：400px；
高度：400px；
保证金：自动；
背景：黑色；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
背景颜色：灰色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.圆圈-1{
宽度：108px；
高度：108px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
顶部：calc（50%-55px）；
左：计算（50%-55px）；
边界：2px；
边框样式：实心；
边框颜色：白色透明；
过渡：1.5s，全部轻松进出；
}
.圆圈-2{
宽度：118px；
高度：118px；
边界半径：50%；
背景色：透明；
位置：绝对位置；
顶部：calc（50%-60px）；
左：计算（50%-60px）；
边界：2px；
边框样式：实心；
边框颜色：白色透明白色；
过渡：1.5s，全部轻松进出；
}
.circle:悬停。circle-2{
变换：旋转（360度）；
}
.圆圈：悬停。圆圈-1{
变换：旋转（-360度）；
}