如何基于滚动触发@keyframes动画，实现圆形X轴旋转控制？

你之前用@keyframes加类的方式行不通，因为这类动画是自动时序播放的，没法和用户的滚动进度精准绑定。正确的做法是监听页面滚动事件，实时计算滚动距离对应的旋转角度，直接给圆形元素设置transform样式。

实现步骤 #

1. HTML结构
   先准备一个圆形元素：

   <div class="circle"></div>
   

2. 基础CSS
   给圆形设置基础样式，确保旋转行为正常：

   .circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background: #2196F3;
     /* 旋转基点默认是中心，可显式声明确保一致 */
     transform-origin: center;
     /* 固定定位方便滚动时观察效果 */
     position: fixed;
     top: 20px;
     left: 20px;
   }
   

3. 原生JavaScript逻辑
   核心是监听scroll事件，根据滚动距离计算对应的旋转角度：

   const circle = document.querySelector('.circle');
   // 定义两个关键滚动节点：160px到峰值90度，280px回到0度
   const peakScroll = 160;
   const endScroll = 280;
   
   window.addEventListener('scroll', () => {
     // 获取当前垂直滚动距离（兼容不同浏览器）
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
     let rotateDeg = 0;
   
     if (scrollTop <= peakScroll) {
       // 滚动0-160px：角度从0递增到90度
       rotateDeg = (scrollTop / peakScroll) * 90;
     } else if (scrollTop > peakScroll && scrollTop <= endScroll) {
       // 滚动160-280px：角度从90递减到0度
       const progress = (scrollTop - peakScroll) / (endScroll - peakScroll);
       rotateDeg = 90 - (progress * 90);
     }
     // 超过280px保持0度，无需额外处理
   
     // 应用绕X轴的旋转样式
     circle.style.transform = `rotateX(${rotateDeg}deg)`;
   });
   
   // 页面加载时主动触发一次滚动事件，确保初始状态正确
   window.dispatchEvent(new Event('scroll'));
   

关键说明 #

• 放弃@keyframes+类的方案，因为它是预设好播放节奏的，无法跟随滚动进度动态调整。
• 通过实时计算滚动距离对应的角度，直接操作transform属性，能实现和滚动进度完全同步的效果。
• 覆盖了三个滚动区间：0-160px角度递增、160-280px角度递减、超过280px保持初始角度。

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