如何使用纯JS实现滚动时图片rotateX属性的动画效果

你需要实现的是图片随滚动切换rotateX角度的效果，原有代码存在角度无限制、未处理离开视口逻辑、前后初始值不统一的问题，以下是修正后的完整可运行代码：

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动效</title>
</head>
<body>
  <h1>请向下滚动页面</h1>
  <div>
    <img src="https://cdn.pixabay.com/photo/2021/06/10/22/14/stork-6327150__340.jpg" alt="鸟类图片">
  </div>
</body>
</html>

CSS代码 #

body {
  background-color: #ccc;
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
  /* 增加页面高度保证可以滚动 */
  min-height: 150vh;
}
div {
  perspective: 800px;
  margin-top: 400px;
  margin-bottom: 200px;
}
div img {
  /* 统一初始角度为70deg，和JS逻辑对齐 */
  transform: rotateX(70deg);
  transition: 0.3s ease;
}

JS代码 #

// 初始角度，可直接修改该数值调整效果
const INITIAL_ROTATE = 70
const targetImage = document.querySelector("img")

function updateImageRotate() {
  const imageRect = targetImage.getBoundingClientRect()
  // 判断图片是否在视口范围内
  const isVisible = imageRect.top < window.innerHeight && imageRect.bottom > 0

  if (isVisible) {
    // 计算滚动进度，动态映射角度，让动画跟随滚动更自然
    const viewportCenter = window.innerHeight / 2
    const progress = Math.min(1, Math.max(0, (viewportCenter - imageRect.top) / viewportCenter))
    const currentRotate = INITIAL_ROTATE * (1 - progress)
    targetImage.style.transform = `rotateX(${currentRotate}deg)`
    targetImage.style.border = "5px solid green"
  } else {
    // 图片离开视口后恢复初始角度
    targetImage.style.transform = `rotateX(${INITIAL_ROTATE}deg)`
    targetImage.style.border = "none"
  }
}

// 监听滚动事件
window.addEventListener("scroll", updateImageRotate)
// 页面加载后初始化一次状态
updateImageRotate()

修正后的代码解决了原有角度不受控的问题，同时支持滚动进度联动动画，图片完全进入视口中段时角度变为0deg，完全离开视口后自动恢复为初始的70deg，不需要修改其他逻辑只需要调整INITIAL_ROTATE的数值就可以更换初始角度。

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