CSS转换转换和缩放交互

Question

我有一个自定义光标，它跟在普通鼠标光标后面，因此我希望它被翻译-50%，这样它的原点就是指针。然而，每当光标悬停在链接或图像上时，我也希望它能放大，但我似乎无法将两者融合在一起。我可以让它变大，但不是从指针变大，也可以从指针变小，但不是变大。有人知道解决办法是什么吗？这可能是我忽略的东西。提前谢谢！

#cursor {
width: 13px;
height: 13px;
border: 1px solid #373839;
position: fixed;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, scale 0.3s ease, background 0.3s ease, top 0.056s ease, left 0.056s ease;
}
.linkHover {
transform: scale(1.5);
background-color: #373839;
}

Answer 1

您只需要为#cursor:设置一个附加规则

transform-origin: top left;

此外，在.linkHover中，如果translate应用于同一元素，请确保保留它们：

.linkHover {
transform: translate(-50%, -50%) scale(1.5);
background-color: #373839;
}