产品列表里图片要放大，头像要转一圈，卡片要往上抬——这些都是 transform 加 :hover。样式在 css/hoverTransform.css，页面在 index.html 里给块加上对应类就行，不用脚本。
悬停类名和各效果如何对应
公共类是 .hover-box，只负责块的样子。效果另挂一条类，一条类对应一种 transform，不要把五种写法塞进同一个选择器。
页面上就是五个块并排，每个都带 .hover-box，再跟一条效果类：
我第一次看也卡了一下：效果类可以单独用，但本例把尺寸、颜色、手型都写在 .hover-box 上，只挂 .hover-scale 的话块会瘪掉。产品里若卡片自己已有宽高，效果类可以不跟 .hover-box，只把那条 transition 和 :hover 拷过去。
卡片尺寸和横向排列怎么写
演示块固定 120px 见方，行高也写成 120px，字才能垂直居中。float: left 加 margin: 20px 往右排；可悬停的块加上 cursor: pointer，否则鼠标上去还是箭头，看着不像能互动。
宽高按设计改。列表里卡片宽度往往是百分比，不要照搬 120px。下面说明文字用 .hover-tip 清掉浮动，避免提示跑到色块旁边去。
旋转、放大、缩小和位移怎么写
四种变化都写在对应类的 :hover 里，改的是 transform 后面那一组函数。
绕竖轴翻面用 rotateY，本例 360deg，转完朝向和开始一样，看起来就是转了一圈。平面内拧一下用 rotate，本例 180deg，字会倒过来。
放大、缩小都是 scale，大于 1 变大，小于 1 变小。本例放大 1.2、缩小 0.8，差得不明显，列表里立刻能看出来；要更夸张就改成 1.5 或 0.6。
位移用 translate(x, y)。本例 (0, -10px)，只往上走 10 像素。第一个数改左右：正值向右，负值向左；第二个数改上下：正值向下，负值向上。说白了就是改这两个数，不用另写一套类。
要同时转和放大，两个函数写在同一条 transform 里，中间空一格。分开写成两条会互相盖掉，后面那条说了算，前面的等于没写。这坑我见过不止一次。
悬停时长和缓动怎么改
transition 写在默认态，不要写在 :hover 里。写在悬停上，移上去有动画，移开会瞬间弹回，看起来像卡了一下。
旋转要看清一整圈，本例写成 2s；另外几种动作短，写成 0.4s。缓动用 ease-in-out，两头慢、中间快，比 linear 匀速更像「抬一下」。
all 表示宽高、颜色、transform 一起过渡。卡片里只有 transform 在变，写成 transition: transform 0.4s ease-in-out 也行，以后加背景色渐变时再改回 all。想弹一点可以换成 ease-out，时间按栏目调，产品图一般 0.3s～0.5s 就够。
产品图或头像上如何加上悬停
列表项用 overflow: hidden 包一层，放大才不会把旁边卡片顶开。效果类挂在里面的 img 上，外层负责裁切。头像再加 border-radius: 50%，圆也跟着裁。
产品图要放大，给 img 加 .hover-scale；头像要转一圈，加 .hover-rotate；卡片要往上抬，加 .hover-move。transition 已经写在这些类上，不用再抄一遍。图路径、卡片宽高按栏目改。放大时若邻居被挡住，检查外层有没有 overflow: hidden。
