如何为已应用transform变换的元素额外添加scale缩放并支持后续移除？

云原生阿岚

2026-10-5

实现方案

可以直接基于WebKitCSSMatrix提供的矩阵运算方法，在已有变换基础上叠加缩放，需要移除时还原预存的原始变换矩阵即可，具体实现如下：

1. 预存元素原始变换矩阵

先在事件绑定前把元素的初始变换矩阵存储到元素自身，方便后续快速还原：

// 你可以在页面初始化、或元素首次应用变换后执行该逻辑
$('.target-element').each(function() {
  const style = window.getComputedStyle(this);
  const originalMatrix = new WebKitCSSMatrix(style.transform);
  // 用jQuery的data方法存在元素实例上
  $(this).data('original-transform', originalMatrix);
});

2. 绑定鼠标事件实现缩放效果

$('.target-element')
  .on('mouseenter', function() {
    const $el = $(this);
    // 读取原始矩阵
    const origin = $el.data('original-transform');
    // 叠加缩放：三个参数分别对应X轴、Y轴、Z轴缩放比例，平面缩放Z轴传1即可
    const scaledMatrix = origin.scale(1.2, 1.2, 1);
    // 应用新变换
    this.style.transform = scaledMatrix.toString();
  })
  .on('mouseleave', function() {
    const $el = $(this);
    // 直接还原原始矩阵，即可完全移除新增的缩放效果
    this.style.transform = $el.data('original-transform').toString();
  });