Movement & Transforms · Move, rotate, scale
Translate位移
- direct
- explicit
- foundational
Moving the element as a whole along the X, Y or Z axis. Its shape stays the same; only its position changes.
When to use it
Use it to move an element from A to B while keeping its shape; do not switch to the top or left properties, which make the page stutter.
Parameters
transform: translateY(-8px) · 200ms · ease-out
Recipe
Translate → 200ms ease-outTranslate → transform: translateY(-8px)
One sentence for your AI
Change this card's lift to transform: translateY(-8px) over 200ms with ease-out, and do not animate top or margin.