2D and 3D transformations in CSS

`translate` is useful for micro-interactions and small visual offsets. `rotate` and `scale` work well as feedback for buttons, chips and clickable cards.

Avoid extreme values. A good transform should be quick, legible and coherent with the action the user just performed.

A practical rule is to keep hover and focus durations short, roughly 120ms to 220ms, and combine transform with a clear color or shadow change.

`perspective` controls perceived depth. The smaller the value, the stronger and more dramatic the 3D effect becomes.

`transform-style: preserve-3d` allows children to keep their spatial position instead of being flattened back into the same plane.

In real components such as cards, product cubes or icons, combine 3D with restrained transitions so the result feels rich instead of dizzying.

The default value is `center center`. Switching to `top left` or `left center` changes the feeling from a central rotation to something closer to a hinge.

For dropdown menus, `transform-origin: top center` often feels right. For side panels, `left center` or `right center` usually fits better.

When the pivot is part of the visual logic of the component, document that choice so it does not get lost during future refactors.

Prefer `transform` and `opacity` for frequent motion. They usually stay smoother because they avoid full reflow.

Do not animate everything. In dense interfaces, too much motion reduces cognitive clarity instead of improving the experience.

Respect reduced-motion preferences with `@media (prefers-reduced-motion: reduce)` and offer a static or minimal-motion alternative.