如何在jQuery中结合clientX、clientY实现translate3d变换

核心参数规则 #

translate3d(x, y, z) 是固定参数顺序的CSS方法：

• 第一个参数：水平方向偏移量，对应原二维translate()的第一个值
• 第二个参数：垂直方向偏移量，对应原二维translate()的第二个值
• 第三个参数：Z轴（垂直于屏幕的纵深方向）偏移量，不需要实际产生纵深位移时，直接填带px单位的0px即可，这个值正是触发浏览器GPU硬件加速渲染的关键——浏览器会将元素提升为独立合成层，位移过程只走GPU合成流程，不会触发主线程重排重绘，性能比二维translate()更好。

之前自行拼接的代码无法生效，基本都是以下语法问题导致的：

• 第三个z轴参数漏写单位、留空不填，导致整个translate3d不符合CSS语法规范，被浏览器直接忽略
• 拼接字符串时漏写参数间的英文逗号、漏写方法的闭合括号，导致transform值无法被正常解析

完整可复用代码 #

完全保留原有偏移计算逻辑，仅替换transform值的拼接方式即可：

// 绑定文档mousemove事件
$(document).on('mousemove', function(event) {
  // 原有偏移计算逻辑完全不做改动
  const offsetX = event.clientX - half_cHeight;
  const offsetY = event.clientY - half_cWidth;
  // 正确拼接translate3d值
  $circle.css('transform', `translate3d(${offsetX}px, ${offsetY}px, 0px)`);
})

额外优化提示 #

可以给圆形元素的基础CSS补充will-change: transform属性，提前让浏览器为该元素预分配合成层资源，进一步减少鼠标跟随过程中的渲染卡顿。注意单页应用中不要给过多元素配置该属性，避免占用过多显存导致页面整体卡顿。

内容的提问来源于stack exchange，提问作者Jack Averill