变换

Transform · transform

把平移、旋转、缩放写进同一个变换；顺序一变，运动轨迹也会变。

卡片进场、倾斜和环绕常常同时写 transform。若不同动画各写一份字符串，后一次可能盖掉前一次；若交换平移与旋转的顺序，卡片会从原地转动变成绕中心运行。把各分量集中在一个函数里，位置、朝向和大小才可独立调。

公式

T = translate3d(x,y,z) · rotateX · rotateY · rotateZ · scale
CSS applies the rightmost operation first
rotate · translate → translation is rotated too

参数

	本页默认	成熟实现
x / y / z	0 px	—z 需要透视才有明显的纵深感。
rotate / X / Y	0°	—轴不同，卡片翻转方向也不同。
scale	1	—
perspective	650 px	—透视设在容器上，不写进参考函数。

怎样做好

让一个地方合成最终的 transform，再一次写入元素；平移、旋转和缩放才不会互相覆盖。www-motion/rewrite/lib/motion-kit.js:133–141
先定坐标系和顺序。translate · rotate 让卡片先转再移动；rotate · translate 连位移方向也一起转，适合绕行。www-motion/rewrite/lib/motion-kit.js:133–141
三维卡片在容器上设置透视，并检查侧面是否被压成细线。站内的 helix 布局按可见位置限制偏航，避免侧面卡片碎成窄条。www-motion/rewrite/lib/motion-kit.js:144–149
优先用 transform 和 opacity 表达位置与显隐；模糊等滤镜按需使用，并在结束时去掉。www-motion/rewrite/momentum-slider/app.js:85–87

在我们的案例里

69 个案例至少用了平移、旋转、缩放或透视之一；65 个用了平移，61 个用了缩放。momentum-slider 把进场的 y 与 scale 写在同一段动画里；motion-kit 的圆柱和螺旋则返回一组 x、z、rotateY，布局函数直接产出完整姿态。

参考实现 · basics.js

/**
 * One transform string in a fixed order: translate → rotate → scale.
 * Order matters (rotate-then-translate orbits instead of moving); write it in one place.
 */
export const transform = ({ x = 0, y = 0, z = 0, rotate = 0, rotateX = 0, rotateY = 0, scale = 1 } = {}) =>
  `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(${rotate}deg) scale(${scale})`;

变换

公式

参数

怎样做好

在我们的案例里

出现在 69 个案例

参考实现 · basics.js

相关