positioning
transform
Applies 2D or 3D transformations like translate, rotate, scale, and skew to an element. Transforms are GPU-accelerated and do not affect surrounding layout.
transform: none | <transform-function> [<transform-function>]*Common values
| Value | Effect |
|---|---|
| none | No transform applied |
| translate(x, y) | Moves the element on the x/y axes |
| rotate(45deg) | Rotates around the transform-origin |
| scale(1.05) | Uniform scale up or down |
| matrix(...) | Compact 2D transform combining scale/skew/translate |
Examples
.card:hover { transform: translateY(-4px) scale(1.02); }Subtle hover lift and grow
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Absolute centering trick
.spinner { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }Continuous rotation animation
Gotcha
Transforms create a new containing block for fixed descendants, which can break position: fixed inside a transformed parent.
Related properties
position
Controls how an element is positioned in the document and whether it participates in normal flow. Non-static values enable top/right/bottom/left offsets and create a positioning context.
transition
Shorthand that animates changes to specified CSS properties over a duration. It is the simplest way to add polish to hover, focus, and state changes.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
z-index
Sets the stack order of positioned elements along the z-axis. Higher values are drawn in front of lower ones within the same stacking context.