一、效果展示

当鼠标移入卡片时效果就会立刻触发，图中的鼠标其实已经放在了卡片的左上角，根据线条可看到。卡片的左上角好像向内压低了一些，而右下角好像是翘起来了，就像是真的把卡片按下去了一样。而且鼠标所在的位置还有一圈高光，让整个效果看着更立体。

二、代码展示与解析

长沙网站建设先使用Html代码制作出卡片的容器与内容区域。外层容器只负责提供透视距离，内容区域才是真正的“卡片本体”。然后通过Css给内容区元素附加上基础效果：

perspective: 900px;为子元素建立透视空间，数值越小透视越夸张，一般取800~1000px；

transform-style: preserve-3d;它可以搭建出三维空间容器，让卡片的标题、正文可以在Z轴上分层（通过 translateZ），产生真实的纵深感；

::after伪类元素的radial-gradient属性，再配合上:hover，可以做出一个跟随鼠标移动的跟随鼠标移动的高光光斑；

transition: transform .5s cubic-bezier(.22,1,.36,1);控制鼠标移出后回弹的缓动，让卡片回到原位的过程更加自然。

最后，由长沙网站设计的 JavaScript 完成效果控制。当鼠标监听事件被触发时，getBoundingClientRect() 方法会立刻计算出鼠标在卡片内的归一化坐标（0~1），然后换算成以卡片中心为原点的 -0.5~0.5 偏移量，分别映射到 rotateY（水平方向）与 rotateX（垂直方向）上，算出卡片的倾斜角度。再把坐标同步写入Css变量中，控制高光光斑的位置，让卡片瞬间变得立体且倾斜。

完整Html与Javascript图如下：

核心代码：

  (function () {

    const card = document.getElementById('box-card');
    const inner = card.querySelector('.title');
    const MAX_DEG = 12;

    card.addEventListener('mousemove', (e) => {

      const rect = card.getBoundingClientRect();
      const px = (e.clientX - rect.left) / rect.width;
      const py = (e.clientY - rect.top) / rect.height;

      inner.style.transition = 'transform 0.08s ease-out';
      inner.style.transform =
        `rotateX(${(0.5 - py) * MAX_DEG * 2}deg)
       rotateY(${(px - 0.5) * MAX_DEG * 2}deg)
       scale(1.03)`;
      inner.style.setProperty('--mx', px * 100 + '%');
      inner.style.setProperty('--my', py * 100 + '%');
    });

    card.addEventListener('mouseleave', () => {
      inner.style.transition = 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)';
      inner.style.transform = 'rotateX(0) rotateY(0) scale(1)';
    });
  })();

三、实现细节与注意事项

有两处细节长沙网站开发认为需要提醒一下：

1、rotateX 的方向要与鼠标纵向位移相反。鼠标越往下，卡片上沿应向外、下沿向内，所以用的是 (0.5 - py) 而不是 (py - 0.5)，否则会出现鼠标移动到左上角，卡片左下角却向内倾斜的还要多，效果看起来会很奇怪。

2、卡片在跟随鼠标移动时，这个过渡时间要设置得短一点。时间越短，卡片的变化速度就越快，有“指哪打哪”的感觉。但不能直接设置为 0，否则就看不到卡片变化的过程了。

四、效果视频展示

点击播放，即可看到效果演示视频。

五、效果应用

实际能够使用到这个效果的地方也很多。比如产品展示卡片、团队成员介绍等等地方都能使用，增加一点页面效果也能提升用户的体验感，也能加深用户对网站的印象。

以上就是长沙网站制作整理出的3D倾斜卡片效果的实现方法，希望对您有所帮助！

长沙蒲公英网络专业提供高效且优质的网站优化服务，为您的企业发展保驾护航！欢迎来电咨询：0731-84069615。