点击/按压时修改渐变值的实现技术求助

我想要实现的效果为鼠标交互时的背景3D变换（此为概念演示效果，非实际成果）

核心需求：需要能够分别对多个不同渐变实现此功能

我曾尝试使用CSS颜色变量（Vars）和事件监听器（Event listener），在CodePen中对纯色背景能生效，但在实际站点中无效。目前我用背景图片实现了部分效果，正在解决主题颜色切换及脚本获取背景缩放设置的问题，但更倾向于直接修改渐变值的原始方法。

我的实现代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
#Background {
  width: 1920px;
  height: 1080px;
  background-image: url("https://previews.dropbox.com/p/thumb/ACUv6h-QQ6PskOhByDXYwHCGjtk1ar3JN5ufhLEEwKxFAJvxxqUyCHMT-DMbK318IVJ_Zn2ustYtg-CcpEPp3egLeHMJoH_teEMKWVjtmw3VSeDvSJpwcqCk89QsDdKjbL4Q9cuPviRrw--RPRXN-uIDTcQYQfkyiQyQT0VMVN5FOwsblLq222dzHRW-YL9huPTGqgmWYNVOc36wpcNva2sVah0UVRLxjeSiGEbF4RPZijO2tp0kYovzRsuybNjkvHbxK4SgO_WGPjebe2Uh9OzoLmygGI-zItBzoqLk9dzLe0Bo6jMQr7v_8fDX3VnJpHNAOMZstzdmXlhQ_INGmlqaaCoTM175t6pYfVxUy_s2qxRotclVumgogKWY2RwUyqk/p.png");
}

  .Embers-Theme-Card {
    --perspective: 1400px;
    --rotateX: 0;
    --rotateY: 0;
    --angle: 6.5deg;
  
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
    padding: 2rem;
    aspect-ratio: 1 / 2;
    background-image: url("http://localhost:10060/images/Embers.png");
    background-size: cover;
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(var(--rotateY));
    transition: transform 350ms ease;

    width: 180px;
    height: 75px;
    border-radius: 20px;
    left:800px;
    Top: 100px;
  }
  
  .Embers-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
  .Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Embers-Theme-Card
  {
    cursor:pointer;
  }
</style>
</head>
<body>


<div id="Background">
        <div class="Embers-Theme-Card"<button onclick="myFunction()"></button>
  <h1>Embers</h1>


  <div class="mouse-position-tracker">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</div>


<script>
function myFunction() {
   document.getElementById("Background").style.backgroundImage = "url(https://previews.dropbox.com/p/thumb/ACX0qlkI5_4X1wx38BE5OYUXzWxSZf1IDvUqHhiRXEWE8XbQf6t-OTWScbY8iUOJi1Zw-v0B89055hqh7J87eIpVkC3gfh4ceH5AATuzh95VVChO9wD1TDCYsgQN9Qc6XDWT2p9x3_BG8zhGu6tuaCxreeS_NJDzAa-W3VU38f7L0Ik2lrn-1KI19pu8caW2DkBL1aY7-QePYnjLvaYmGvCrk4ZUYu27ITHJMQYtJd_VsEwCyp3-CLABikGcO0gtaeo1GrhtAjKjC6QRxnmCz3A-uCbb-aF9aJyxkOs3Mues2Pi8H8PNhZ3sZ7pQqbqhChdgg4BvXJPUfeK5RZhWa6jxsXVgYnbTaqEjLWWO7ONvOw/p.png)";
}

</script>

</body>
</html>

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