# Effects · 3D Split React 网页组件 | Creght Blocks

> 滚动驱动的三联卡片分裂、翻转与落位动效，适合沉浸式叙事。

[Blocks](/zh-CN.md) [Sections](/zh-CN.md#section-library) [TemplatesNew](/zh-CN/templates.md)

[Templates](/zh-CN/templates.md)

[EN](/blocks/3d-split.md) [中文](/zh-CN/blocks/3d-split.md)

[全部组件](/zh-CN.md)/Effects · 3D Split

视觉动效免费

Creght Blocks 组件

# Effects · 3D Split

滚动驱动的三联卡片分裂、翻转与落位动效，适合沉浸式叙事。

[完整预览](/zh-CN/preview.md?section=3d-split)

在 Creght 中使用

## 实时预览

切换桌面、平板和手机宽度，检查组件的响应式效果。

桌面平板手机

组件介绍

## 可直接用于生产项目的页面板块

滚动驱动的三联卡片分裂、翻转与落位动效，适合沉浸式叙事。

### 如何使用

1. 01
确认适用场景

通过组件说明和技术信息，判断它是否适合当前页面。

2. 02
检查页面效果

切换不同设备宽度，并打开完整预览体验真实交互。

3. 03
用于实际项目

前往 Creght，根据品牌、内容和转化目标继续调整组件。


技术信息

分类视觉动效

运行开销较高运行开销

渲染方式客户端动画

依赖lucide-react

## 相关组件

继续浏览同一分类下的其他组件。

[![Effects · Image Intro](https://fsu.creght.com/site/2083536173505974272/1786355364521__creght_blocks_covers_image_intro.png?w=3072&fmt=webp)](/zh-CN/blocks/image-intro.md)

### [Effects · Image Intro](/zh-CN/blocks/image-intro.md)

图片卡片从底部汇聚成旋转圆环，适合品牌片头与作品展示。

[![Effects · Cards Expand](https://fsu.creght.com/site/2083536173505974272/1786330545269__cards_expand_cover_4x3.jpg?w=3072&fmt=webp)](/zh-CN/blocks/cards-expand.md)

### [Effects · Cards Expand](/zh-CN/blocks/cards-expand.md)

滚动触发的编辑卡片展开动效，从紧凑扇形平滑过渡为对角阵列。

[![Effects · Inner Globe](https://fsu.creght.com/site/2083536173505974272/1785746498550__inner_globe.png?w=3072&fmt=webp)](/zh-CN/blocks/inner-globe.md)

### [Effects · Inner Globe](/zh-CN/blocks/inner-globe.md)

让品牌图片环绕球面旋转，营造沉浸式空间体验。

> 全站页面清单：[/llms.txt](/llms.txt)