Transform

Move an element without moving its neighbors

Transforms rotate, scale, skew, or translate the painted element without changing the space allocated to it in normal layout. They are helpful for a subtle hover effect or a decorative arrangement. Their order is significant, so compare the final combined declaration rather than treating each function independently.

How to use this tool

1. Adjust one transform at a time to learn what it changes. Choose the transform origin when rotation should pivot around an edge.
2. Combine translation, rotation, and scaling while checking surrounding content. A scaled element can overlap its neighbors.
3. Copy the transform declaration and any origin or perspective settings. Add a restrained transition only if a state changes interactively.

A small upward movement can suggest that a tile is interactive without altering the grid around it. This example is optional decoration; the underlying link or button still needs a clear focus state and an understandable label.