3D & Depth

排成环形的面板在 3D 空间中绕竖直轴旋转。

在[应用位置]添加“3D轮播”(3D Carousel)，也叫 rotating ring carousel。
把面板排成透视下的环形；每次点击“下一个”，整个环绕竖直轴平滑转动，把下一块面板转到正前方。
控件要能用键盘操作，并向屏幕阅读器播报当前面板；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

带有标记点或弧线的 3D 地球在页面中旋转。

在[应用位置]添加“3D地球”(3D Globe)，也叫交互式地球(interactive globe)。
表面带几个标记点的地球绕轴缓慢匀速转动，标记点随之一起转：平静而连续。
把它作为装饰，为其展示的信息提供文字替代；移出屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。

悬停时卡片向后透视倾斜，同时一枚图钉和光晕朝观看者升起。

在[应用位置]添加“3D图钉”(3D Pin)悬停效果，也叫 pin hover 3D。
指针停在卡片上时，卡片向后透视倾斜，同时一枚底部带柔和光晕的图钉从中心升起；指针移开后一切复原：平滑，不要弹跳。
保持卡片在布局中所占空间不变，键盘焦点时也显示同样的效果。

卡片朝指针方向透视旋转，分层内容从表面浮起。

在[应用位置]添加“3D倾斜”(3D Tilt)效果，也叫 perspective tilt 或 tilt card。
指针移动时，卡片朝指针方向透视倾斜，内部各层以不同深度从表面浮起；指针移开后平滑地恢复平放：平滑而含蓄。
倾斜幅度要小，保证文字易读；在触屏设备上，以及用户开启了“减少动态效果”(prefers-reduced-motion)时，让卡片保持平放。

卡片绕轴翻转半圈，露出背面。

在[应用位置]添加“卡片翻转”(Card Flip)效果，也叫 flip card 或 card flip 3D。
指针停在卡片上时，卡片绕竖直轴透视翻转、露出背面；指针移开后翻回来：平滑而稳定。
隐藏每个面的背侧，避免正反两面互相透出；键盘焦点和触屏设备上的轻点也要能触发翻转。

卡片略微错开地叠在一起，最上面的卡片移开，露出下一张。

在[应用位置]添加“卡片堆叠”(Card Stack)，也叫 stacked cards。
把卡片略微错开地一张张叠在后面；每次点击，最上面的卡片向一侧甩开并塞到最后，其余卡片依次前移：平滑，轻快利落。
支持键盘操作，让屏幕阅读器能按顺序访问每张卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

中间的项目正对前方，两侧的项目透视斜向后方。

在[应用位置]添加“封面流”(Coverflow)轮播，也叫 cover flow carousel。
中间的项目正对前方，两侧的项目透视地转向后方；横向拖动时整排滑动，松手后平滑地停在最近的项目上。
除拖动外还要支持方向键和滑动手势，并保证触屏设备上页面仍能正常纵向滚动。

内容分布在立方体的各个面上，立方体旋转以显示下一个面。

在[应用位置]添加“立方体旋转”(Cube Rotate)切换效果，也叫 3D cube 或 cube transition。
把内容放在透视立方体的各个侧面上；每次点击“下一个”，立方体绕竖直轴平滑转动，把下一个面转到正前方。
只让正面能被键盘和屏幕阅读器访问；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。

一道明亮的高光像反光一样随指针在卡片表面移动。

在[应用位置]添加“眩光全息卡片”(Glare / Holographic Card)效果，也叫 glare card 或 glare hover。
一道柔和明亮的高光随指针在卡片表面移动，像光线在上面反射，同时卡片朝指针方向微微倾斜；指针移开后两者都淡出：平滑而含蓄。
让点击能穿透高光层，保证其下的内容清晰可读；在触屏设备上显示不带高光的卡片。