滚动旋转揭示特效（卡片旋转入场，轴与角度实时可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动：标题、段落与六张卡片都带旋转角度入场。下方控件可切换三种旋转轴并实时调节旋转角度，「重新播放」一键重看。

完整代码

<div class="sr-scroller" id="srScroller" data-axis="plane" style="--sr-angle: 14deg">
  <div class="sr-item">滚动旋转揭示……</div>
</div>

.sr-scroller[data-axis="plane"] .sr-item {
  transform: rotate(var(--sr-angle, 14deg)) translateY(22px);
}
.sr-scroller[data-axis="x"] .sr-item {
  transform: perspective(700px) rotateX(calc(var(--sr-angle, 14deg) * -1)) translateY(22px);
}
.sr-scroller[data-axis="y"] .sr-item {
  transform: perspective(700px) rotateY(var(--sr-angle, 14deg)) translateY(22px);
}
.sr-item { opacity: 0; transition: opacity .65s ease, transform .65s cubic-bezier(.4, 0, .2, 1); }
.sr-item.in { opacity: 1; transform: none; }

const io = new IntersectionObserver(entries => {
  entries.forEach(en => {
    if (en.isIntersecting) {
      en.target.classList.add('in');
      io.unobserve(en.target);
    }
  });
}, { root: scroller, threshold: 0.2 });
items.forEach(el => io.observe(el));

实现要点：初始状态叠加旋转与位移，进入视口后过渡回 transform: none 归正。旋转角度用 CSS 变量 --sr-angle 统一管理；立体轴需要 perspective 才能产生近大远小的真实 3D 感，透视值 600-1000px 最安全。

参数说明

兼容性与性能

• 动画只操作 transform 与 opacity，均在合成器线程完成；perspective 已内联进 transform，不额外创建层
• IntersectionObserver 异步调度，触发一次后立即 unobserve，滚动全程零 JS 计算、零残余观察器
• 旋转过渡使用 cubic-bezier(.4,0,.2,1) 缓动，落定前有轻微「回正感」，观感自然不生硬
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android 现代版本），无需任何 polyfill

常见问题

Q: 绕 X/Y 轴旋转时没有 3D 立体感？ 检查是否加了 perspective：没有透视时 rotateX/rotateY 只是平面压扁，加上 perspective(700px) 后近大远小立即出现，立体感由此而来。

Q: 角度调大后旋转过程看起来很「晃」？ 大角度（30° 以上）配合长距离位移会产生晃动感。建议大角度时去掉 translateY 位移，只保留纯旋转，观感更干净。

Q: 卡片墙想错峰入场怎么做？ 参考「滚动卡片交错」组件：为同一批卡片递增 transition-delay（每张 70ms），并把它们放进同一个 .in 触发批次即可。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。