提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“3D轮播”(3D Carousel)，也叫 rotating ring carousel。
把面板排成透视下的环形；每次点击“下一个”，整个环绕竖直轴平滑转动，把下一块面板转到正前方。
控件要能用键盘操作，并向屏幕阅读器播报当前面板；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。相似的动效
ABCDE
拖动试试
Coverflow (封面流)
别称 Cover flow carousel
中间的项目正对前方，两侧的项目透视斜向后方。
适用场景
专辑和媒体轮播
在[应用位置]添加“封面流”(Coverflow)轮播，也叫 cover flow carousel。
中间的项目正对前方，两侧的项目透视地转向后方；横向拖动时整排滑动，松手后平滑地停在最近的项目上。
除拖动外还要支持方向键和滑动手势，并保证触屏设备上页面仍能正常纵向滚动。A
B
C
点击试试
Carousel Slide (轮播滑动)
别称 Slider, Swipe carousel, Scroll-snap carousel
幻灯片在可视区域内水平移动，每次吸附一张到位。
适用场景
首屏横幅、商品图库
在[应用位置]添加“轮播滑动”(Carousel Slide)，也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动，使下一张幻灯片吸附到中间，平滑减速；两侧边缘露出相邻的幻灯片，位置圆点也跟着变化。
每次只移动一张，除了按钮和方向键，也支持触屏滑动，并给控件加上供屏幕阅读器读取的标签。ABCD
点击试试
Cube Rotate (立方体旋转)
别称 3D cube, Cube transition
内容分布在立方体的各个面上，立方体旋转以显示下一个面。
适用场景
轮播切换、功能切换器
在[应用位置]添加“立方体旋转”(Cube Rotate)切换效果，也叫 3D cube 或 cube transition。
把内容放在透视立方体的各个侧面上；每次点击“下一个”，立方体绕竖直轴平滑转动，把下一个面转到正前方。
只让正面能被键盘和屏幕阅读器访问；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。3D & Depth 中的其他动效
3D Globe (3D地球)
别称 Interactive globe
带有标记点或弧线的 3D 地球在页面中旋转。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“3D地球”(3D Globe)，也叫交互式地球(interactive globe)。
表面带几个标记点的地球绕轴缓慢匀速转动，标记点随之一起转：平静而连续。
把它作为装饰，为其展示的信息提供文字替代；移出屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。A
将鼠标悬停在上面
3D Pin (3D图钉)
别称 Pin hover 3D
悬停时卡片向后透视倾斜，同时一枚图钉和光晕朝观看者升起。
适用场景
链接预览卡片
在[应用位置]添加“3D图钉”(3D Pin)悬停效果，也叫 pin hover 3D。
指针停在卡片上时，卡片向后透视倾斜，同时一枚底部带柔和光晕的图钉从中心升起；指针移开后一切复原：平滑，不要弹跳。
保持卡片在布局中所占空间不变，键盘焦点时也显示同样的效果。A
移动指针试试
3D Tilt (3D倾斜)
别称 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
卡片朝指针方向透视旋转，分层内容从表面浮起。
适用场景
产品卡片和价格卡片
在[应用位置]添加“3D倾斜”(3D Tilt)效果，也叫 perspective tilt 或 tilt card。
指针移动时，卡片朝指针方向透视倾斜，内部各层以不同深度从表面浮起；指针移开后平滑地恢复平放：平滑而含蓄。
倾斜幅度要小，保证文字易读；在触屏设备上，以及用户开启了“减少动态效果”(prefers-reduced-motion)时，让卡片保持平放。