图片卡片hover动画失效的根本原因是未显式声明transform初始值，需设置transform: scale(1)并仅对transform和box-shadow等实际变化属性应用transition。
图片卡片 hover 时缩放+阴影过渡不生效？检查 transition 是否作用在正确属性上
常见现象是写了 transition: all 0.3s，但鼠标悬停后图片只闪一下、没动画，或缩放卡顿。根本原因是：图片本身没设置初始 transform，浏览器无法对「从无到有」的 transform 做插值过渡。
必须显式声明初始状态（哪怕为默认值）：
.card img { transform: scale(1); transition: transform 0.3s ease, box-shadow 0.3s ease; }.card:hover img { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }- 避免用
all，它会强制重绘所有可动画属性（如 color、opacity），拖慢性能；只写你真正在变的属性
卡片翻转时背面内容穿透/镜像重叠？backface-visibility: hidden 必须加在正反面元素上
3D 翻转（如 rotateY(180deg)）失败，最常被忽略的是这个属性——它不是加在外层容器，而是加在 .card-front 和 .card-back 两个子元素上。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 漏掉任一侧面都会导致翻转中途看到「双面叠加」或「背面镜像倒置」
- 必须配合
transform-style: preserve-3d（加在翻转载体上，如.card-inner） -
perspective要设在外层容器（如.card-container），数值太小（如 200px）会让翻转失真，建议 600–1000px
响应式卡片中 transition 动画错位？transform-origin 默认值在 flex/grid 下可能偏移
当卡片用 display: flex 或 grid 排列，且设置了 align-items: center 或 justify-content: center，图片缩放中心可能不在视觉正中——因为 transform-origin 默认是元素盒模型的左上角（0 0），不是渲染后的居中点。
立即学习“前端免费学习笔记（深入）”；
- 显式写
transform-origin: center或50% 50%，确保缩放/旋转锚点准确 - 如果卡片用了
overflow: hidden且含圆角，缩放时边缘可能被裁切；此时把border-radius放在外层容器（.card），而非图片本身 - 移动端 touch 触发 hover 效果不稳定，建议同时加
:focus-within或用 JS 补充 tap 逻辑
图片加载完成前就触发过渡？用 img 的 load 事件或 CSS content-visibility 控制时机
首屏卡片刚打开时，图片还没加载完，hover 过渡直接作用在空白区域，用户感知不到效果。这不是 CSS 问题，而是资源加载时序问题。
- 简单方案：给图片加
opacity: 0; transition: opacity 0.3s，监听img.onload后设opacity: 1，再启用 hover 动画 - 现代方案：对卡片容器加
content-visibility: auto（Chrome 85+），延迟非视口内卡片的渲染和过渡初始化 - 慎用
will-change: transform：它会提前开启图层，但滥用会导致内存占用飙升，只在已确认频繁动画的卡片上加
