如何用CSS、HTML实现仿苹果手机的图片3D悬浮效果（鼠标触发）

阿华AIGC实验室

2026-5-28

实现鼠标触发的iOS风格图标微动效

嘿，你说的那个iOS旋转屏幕时图标轻微浮动的效果，其实可以通过鼠标跟随视差微动效来实现，完全适配你的需求——用鼠标操作触发，针对<img>标签，只用HTML、CSS和JavaScript就能搞定，不用jQuery也可以（当然想用也没问题）。下面直接上可运行的示例代码，我会给你拆解关键部分：

核心思路

监听鼠标在页面的移动位置，计算每个图片相对于鼠标的偏移比例，然后通过CSS的transform属性给图片添加轻微的位移、甚至一点点旋转，模拟那种“跟着鼠标轻轻浮动”的自然感，关键是要控制参数，别让效果太夸张，保持iOS那种细腻的感觉。

完整示例代码

HTML

<div class="parallax-container">
  <img src="你的图片地址1.jpg" class="parallax-img" alt="示例图片1">
  <img src="你的图片地址2.jpg" class="parallax-img" alt="示例图片2">
  <img src="你的图片地址3.jpg" class="parallax-img" alt="示例图片3">
</div>

CSS

.parallax-container {
  position: relative;
  width: 100vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  /* 加个透视效果，让微动效更有层次感 */
  perspective: 1000px;
}

.parallax-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  /* 过渡动画让移动更丝滑，不要太突兀 */
  transition: transform 0.15s ease-out;
  /* 给图片加一点阴影，增强立体感 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

JavaScript

// 获取所有需要微动的图片
const parallaxImgs = document.querySelectorAll('.parallax-img');
// 获取容器（如果想限制只在容器内触发，可以用这个元素监听事件）
const container = document.querySelector('.parallax-container');

// 监听鼠标移动事件
container.addEventListener('mousemove', (e) => {
  // 计算鼠标在容器内的相对位置（百分比）
  const xPercent = (e.clientX - container.offsetLeft) / container.offsetWidth;
  const yPercent = (e.clientY - container.offsetTop) / container.offsetHeight;

  // 遍历每个图片，设置微动效果
  parallaxImgs.forEach(img => {
    // 计算位移量：这里的数值可以调整，越小越接近iOS那种轻微的感觉
    const moveX = (xPercent - 0.5) * 10; // 左右偏移范围：-5px 到 +5px
    const moveY = (yPercent - 0.5) * 10; // 上下偏移范围：-5px 到 +5px
    // 可以加一点点旋转，增强真实感
    const rotateX = (yPercent - 0.5) * 5; // 上下旋转范围：-2.5deg 到 +2.5deg
    const rotateY = (xPercent - 0.5) * -5; // 左右旋转范围：+2.5deg 到 -2.5deg

    // 应用transform效果
    img.style.transform = `translate(${moveX}px, ${moveY}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
});

// 鼠标离开容器时，让图片回到原位
container.addEventListener('mouseleave', () => {
  parallaxImgs.forEach(img => {
    img.style.transform = 'translate(0, 0) rotateX(0) rotateY(0)';
  });
});