3D 翻转入场

元素在 Y 轴上做 180° 翻转，同时配合透明度变化，创造出类似翻牌的入场效果。

实时预览

3D 翻转
翻牌式入场

代码

html

<style>
  .flip-target {
    opacity: 0;
    transform: perspective(800px) rotateY(90deg);
    transform-origin: left center;
    backface-visibility: hidden;
    transition:
      opacity 0.8s ease-out,
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .flip-target.visible {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg);
  }
</style>

<div class="flip-target">3D 翻转</div>

3D 翻转入场滚动触发效果——元素在进入浏览器视口时触发 CSS transition 动画，从隐藏状态过渡到可见状态。配合 Intersection Observer API 实现视口检测，动画由 CSS 驱动，性能优异。

快速使用

复制 CSS 的初始状态和过渡样式到你的样式文件中
给需要滚动触发动画的元素添加初始类和 .scroll-target 样式
使用 Intersection Observer（或本站提供的 JS）在元素进入视口时添加 .visible 类
调整 transition 的持续时间和缓动函数以匹配你的页面节奏

使用场景

首屏英雄区：页面加载后元素渐次出现，营造叙事节奏
产品特性展示：每滚动到一个特性区块，触发不同的入场动画
视差滚动：多层背景以不同速度滚动，营造深度感
长篇文章/落地页：滚动进度条给用户阅读进度的心理预期

常见问题

Q: 滚动动画需要 JavaScript 吗？ A: 本站滚动动画的演示版用少量 JS（Intersection Observer）检测元素进入视口。纯 CSS 方案可用 @scroll-timeline（Chrome 实验性支持），但生产环境建议用 Intersection Observer + CSS transition 组合。

Q: 如何控制滚动动画只播放一次？ A: Intersection Observer 中设置 once: true 选项，元素进入视口后移除 observer。或者添加 class 后就永久保留，利用 CSS transition 的 forwards 填充模式。

Q: 移动端滚动动画卡顿怎么办？ A: 确保动画属性只用 transform 和 opacity；降低动画元素的复杂度（减少阴影、模糊等重效果）；用 will-change: transform 提前提升合成层。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（Intersection Observer + CSS transition）
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	❌ Intersection Observer 不支持，需 polyfill

使用说明

属性	说明
`perspective(800px)`	3D 透视距离，值越小效果越夸张
`rotateY(90deg)`	Y 轴旋转 90° 使元素侧对观众（完全隐藏）
`transform-origin: left center`	以左侧为轴心翻转
`backface-visibility: hidden`	隐藏翻转面，避免穿帮
`cubic-bezier(0.4, 0, 0.2, 1)`	Material Design 标准缓动曲线

提示： 可将 transform-origin 改为 right center 或 center center 来改变翻转方向。也可用 rotateX() 替代 rotateY() 实现上下翻转。

3D 翻转入场 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐