3D 翻转卡片

标准组合拳：父容器 perspective、翻转层 transform-style:preserve-3d、两面 backface-visibility:hidden；背面元素预置 var(--flip) 旋转。

透视必须放在翻转元素的父级：perspective 写在自身时，透视中心随元素变化，翻转观感会失真。

-webkit-backface-visibility 前缀建议保留（老 WebKit 内核需要），两面都加 inset:0 绝对定位叠放。

翻转轴与背面预旋转必须用同一个变量（--flip），切换 rotateY/rotateX 轴向时两者自动保持一致，不会露出镜像。

触屏设备没有 hover，用 :active 提供按下翻面；reduced-motion 下去掉过渡、内容即时切换。

预览态自动演示：body 未被 hover 时翻转层以 7.5s 周期自动正反翻转，两面各停留 2s 以上、翻转过程短促（keyframes 复用 --flip 变量，轴向切换后演示同步），任意帧截屏文字都水平完整；光标进入 iframe 后让位给真实 hover 翻转。