transform
Moves, rotates, scales, or skews an element without changing normal document flow. It is one of the cheapest properties to animate.
5,623 effects in the catalog use this property.
Syntax
transform: translate(...) rotate(...) scale(...) skew(...);Watch out
Transform functions are order-sensitive and are applied from left to right. Translating after a rotation moves the element along its rotated axes.
Common values
translateY(-4px)- Lift upward, a classic hover treatment
scale(1.05)- Scale up
rotate(45deg)- Rotate
translate3d(0,0,0)- Promote rendering to a composited layer
Effects using transform
These are working effects from the catalog. Open a tile to inspect the full source.