javascript鼠标悬停图片倾斜动画特效代码

所属分类：网页特效-图片特效&上传 2023-12-03 05:29:20

149 1 查看评论 (0)

反馈问题查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：一款悬停图片倾斜动画效果，当鼠标悬停在图片上时，图片会随着鼠标移动坐标位置，从而倾斜不同的角度，有点类似于3D立体感。

javascript鼠标悬停图片倾斜动画特效代码（共4个文件）

img
- kuli.jpg
js
- script.js
css
- style.css

index.html

使用方法

const image = document.querySelector(".tilt");

image.addEventListener("mousemove", event => {
  const { top, bottom, left, right } = event.target.getBoundingClientRect();

  const middleX = (right - left) / 2;
  const middleY = (bottom - top) / 2;

  const clientX = event.clientX;
  const clientY = event.clientY;

  const offsetX = (clientX - middleX) / middleX;
  const offsetY = (middleY - clientY) / middleY;

  event.target.style.transform = `perspective(1000px) rotateY(${offsetX *
    5}deg) rotateX(${offsetY * 5}deg) scale3d(1, 1, 1)`;
});

站长提示：
1. 平台上所有素材资源，需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励20K币。
3. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
4. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服