在H5中用@keyframes实现卡片3D摇晃效果，需为父容器设perspective、卡片设transform-style:preserve-3d和backface-visibility:hidden，配合rotateX/Y/Z与translateZ定义±3°内关键帧动画，并通过:hover触发，添加-webkit前缀及移动端class模拟适配。
在 H5 页面中，用 @keyframes 实现卡片悬停时的立体 3D 摇晃效果，核心是结合 transform: rotateX()/rotateY()/rotateZ()、perspective 和 transform-style: preserve-3d，让元素拥有真实空间感，再通过关键帧定义摇晃路径。
启用 3D 渲染上下文
单纯用 rotateX 不会呈现立体感，必须为父容器设置景深和 3D 渲染模式：
- 给卡片外层容器（如
.card的父元素）加perspective: 1000px（值越小，3D 效果越夸张） - 给卡片本身设
transform-style: preserve-3d，确保子元素的 3D 变换不被扁平化 - 推荐同时加上
backface-visibility: hidden，避免翻转时背面闪烁或错位
定义摇晃动画的关键帧
立体摇晃不是简单左右摆动，而是模拟绕 X/Y 轴轻微旋转+微小位移，增强真实感。例如：
@keyframes float-3d-shake {
0% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
25% { transform: rotateX(-3deg) rotateY(2deg) translateZ(5px); }
50% { transform: rotateX(2deg) rotateY(-2deg) translateZ(0); }
75% { transform: rotateX(-1deg) rotateY(1deg) translateZ(3px); }
100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
}
注意：角度控制在 ±3° 内更自然；translateZ 配合 perspective 营造前后浮动感；避免使用过大角度或位移，否则像“抽搐”而非“摇晃”。
绑定悬停触发与动画参数
用 :hover 触发动画，并优化体验细节：
- 写在卡片自身上：
.card:hover { animation: float-3d-shake 1.8s ease-in-out infinite; } - 加
animation-fill-mode: forwards可选，但无限循环时通常不需要 - 为防止首次悬停卡顿，提前声明
transform: translateZ(0)（触发硬件加速） - 建议搭配
transition: transform 0.3s ease让入场/离场更柔和
兼容性与移动端适配
H5 页面常需兼容 iOS Safari 和安卓 WebView：
- 务必加
-webkit-前缀（尤其 iOS 15 以下）：@-webkit-keyframes+-webkit-transform - 移动端触摸屏无
:hover，可用 JS 切换 class 模拟（如监听touchstart添加is-hovered类） - 低端安卓机可能卡顿，可加媒体查询降级：
@media (prefers-reduced-motion: reduce) { .card:hover { animation: none; } }
