假设屏幕上的鼠标光标后面有一个div。这是通过处理文档mousemove事件并基于事件数据设置其left和top位置来实现的。
对于这个例子，假设它的宽度和高度分别为10。
希望它始终以光标为中心。要做到这一点，left和top需要水平偏移div宽度的一半，垂直偏移div高度的一半。这使得它可以完美地位于鼠标光标的中心。
document.querySelector(".circle").style.left = e.x - (width / 2)
然而，这在应用程序的许多地方都会完成，而且看起来很麻烦。是否可以设置原点，以便在设置left和top属性时，不需要偏移宽度和高度的一半，因为原点将位于div的中心？
我唯一能找到的是transform-origin属性，但这似乎只适用于transformCSS属性，而不适用于像left、margin-left等属性。
这能做到吗？
您可以使用：
transform: translate(-50%, -50%);
这将根据元素本身的宽度和高度计算百分比。
示例片段：
const move = document.getElementById("move")
const mouseMoveHandler = e => {
move.style.left = e.pageX + 'px';
move.style.top = e.pageY + 'px';
}
window.addEventListener('mousemove', mouseMoveHandler)#move {
position: absolute;
transform: translate(-50%, -50%);
}<div id="move">I follow the cursor</div>您可以相对于0x0的父级绝对地偏移，并进一步使父级用鼠标移动。
<!DOCTYPE html>
<html>
<head>
<style>
.origin {
position: relative;
width: 0px;
height: 0px;
}
.circle {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="origin">
<div class="circle"/>
</div>
</body>
</html>
查看更多详细信息：https://www.w3schools.com/css/css_positioning.asp