Transform

变换 · transform

Put translation, rotation and scale in one transform. Change the order and you change the path.

Entrances, tilts and carousels often all write transform. Separate writers can overwrite one another. Swapping translation and rotation also turns an in-place spin into an orbit. Assemble the components in one place so position, orientation and size stay independently adjustable.

Formula

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

Parameters

	This page	Mature libraries
x / y / z	0 px	—Perspective makes z depth visible.
rotate / X / Y	0°	—Each axis turns the card in a different direction.
scale	1	—
perspective	650 px	—Perspective belongs on the container, outside the reference function.

Doing it well

Compose the final transform in one place and write it once so translation, rotation and scale do not overwrite each other.www-motion/rewrite/lib/motion-kit.js:133–141
Choose the coordinate system and order first. translate · rotate turns then moves a card; rotate · translate rotates its travel direction too, producing an orbit.www-motion/rewrite/lib/motion-kit.js:133–141
Put perspective on the container and check edge-on cards. The site's helix layout limits yaw by visible position so cards do not collapse into thin slivers.www-motion/rewrite/lib/motion-kit.js:144–149
Express movement and visibility with transform and opacity when suitable; use blur deliberately and remove the filter at rest.www-motion/rewrite/momentum-slider/app.js:85–87

In our cases

All 69 studies use at least one of translation, rotation, scale or perspective; 65 translate and 61 scale. momentum-slider combines y and scale in its entrance, while motion-kit's cylinder and helix return x, z and rotateY as one pose.

Reference implementation · 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})`;