如何在已用arctype.js的元素上叠加CSS transform变换效果？

我懂你的痛点——arctype.js为了实现文本弯曲效果，已经动态给每个字符元素（比如你的.char1）设置了transform属性，这直接导致你自己写的CSS变换（比如hover时的缩放）要么被覆盖，要么会把插件的弯曲效果冲掉。毕竟一个元素的transform属性只能生效一组变换值，后设置的会覆盖掉之前的。

这里有两个靠谱的解决方案，你可以根据自己的情况选：

方案1：嵌套元素分离变换层级（推荐） #

核心思路是把插件的弯曲变换和你的自定义变换放在不同的元素上：

1. 先修改HTML，给每个字符套一层父容器：

<center>
  <h2 id="days" class="numbers">
    <span class="char-container"><span class="char">1</span></span>
    <span class="char-container"><span class="char">2</span></span>
    <!-- 剩下的数字都按这个格式嵌套 -->
  </h2>
</center>

2. 配置arctype.js，让它把弯曲效果的transform应用在.char-container这个父元素上（具体配置可以看插件文档里的目标元素选项）。
3. 然后你的自定义变换就可以放心写在内部的.char元素上了：

.numbers .char {
  transition: transform 0.8s ease;
}
.numbers .char:hover {
  transform: scale(0.7);
}

这样两个变换层级完全分离，插件的弯曲和你的缩放互不干扰。

方案2：通过JS合并变换值（无需改HTML） #

如果不想调整HTML结构，你可以用JS监听hover事件，把插件的现有变换和你的缩放变换合并起来：

// 页面加载完成后保存每个字符的初始transform值
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.numbers [class^="char"]').forEach(charEl => {
    charEl.dataset.originalTransform = charEl.style.transform;
  });
});

// 监听hover事件合并变换
document.querySelectorAll('.numbers [class^="char"]').forEach(charEl => {
  charEl.addEventListener('mouseenter', () => {
    const originalTransform = charEl.dataset.originalTransform;
    // 把插件的变换和你的scale合并
    charEl.style.transform = `${originalTransform} scale(0.7)`;
  });
  
  charEl.addEventListener('mouseleave', () => {
    // 恢复原来的弯曲变换
    charEl.style.transform = charEl.dataset.originalTransform;
  });
});

这个方法的原理是先保存插件设置的初始transform值，hover时把它和你的scale变换拼接在一起，离开时再恢复原有的变换。

注意：如果arctype.js会动态更新transform值（比如动画效果），你可能需要用MutationObserver来实时更新保存的初始值，避免变换失效。

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