Html rotate（）将图像的中心移离光标

这是JSFIDLE代码：

这很好，图像的中心位于光标中

#按钮{
保证金：0；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
}

让moveitem=document.getElementById（'button'）；
常量移动按钮=（e）=>{
moveitem.style.left=e.pageX+‘px’；
moveitem.style.top=e.pageY+'px'；
}
document.addEventListener（'mousemove'，MoveButton）；

将变换原点设置为中心。

---

关键帧动画应用的属性将覆盖以前设置的任何属性

在您的情况下，应用旋转动画将覆盖应用于

#按钮的
变换。所以
transform:translate（-50%，-50%）替换为
变换：旋转（0度）

若要解决此问题，请更新旋转动画以包括平移：

@keyframes rotation {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

其他人提到该问题是由
转换原点
引起的，虽然不是这样，但我建议明确设置
转换原点：中心在
#按钮中
寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。See无法回答此问题，因为它刚刚关闭，但…应用
旋转
动画会覆盖
#enter按钮
应用的变换，因此
平移（-50%，-50%）
不再应用。将
rotaion
动画更新为：``@关键帧旋转{从{transform:translate（-50%，-50%）旋转（0deg）；}到{transform:translate（-50%，-50%）旋转（360deg）；}}``@谢谢，效果不错。我已经解决了这个问题，一旦它再次打开，请在另一条消息中写下答案，以便我可以选择它作为问题的解决方案。@lzrdblzzrd没问题，我很高兴它对您有效！谢谢你，我会在重新开放后提交答案不，它不起作用。“变换原点”（transform origin）会围绕指定点旋转图像，但不会将图像中心移动到光标。是否尝试将其同时放置在关键帧和css选择器本身中？