OnlineCBT
Change visual geometry without reflowing neighboring boxes
A transform changes how a box is painted. Translation moves it, rotation turns it, scaling changes its apparent size and skew slants it. The element's ordinary layout position remains reserved, so surrounding content normally does not move to make room.
.tile {
width: 12rem;
padding: 2rem;
background: #dbeafe;
transform: translateX(1rem) rotate(5deg);
transform-origin: center;
}
.tile:hover { transform: translateX(1rem) rotate(0deg) scale(1.03); }The tile is drawn to the side and slightly rotated, but its original place in normal flow still exists. This differs from changing margin or an in-flow size.
Order matters
Transform functions compose in order, and their effect is not generally interchangeable. Translating then rotating is not the same matrix as rotating then translating. Compare both on a visible box instead of assuming the values are independent.
Percentage translation
A percentage in translate is relative to the relevant reference box of the transformed element, not automatically to its parent's width. That distinction explains common centring patterns that use a 50% position plus translate(-50%). Prefer grid or flex centring when it expresses the layout more directly.
Containing blocks and stacking
A non-none transform creates a stacking context and can establish a containing block for positioned descendants, including fixed-position behavior. A decorative transform on an ancestor can therefore change an overlay's placement. Inspect the ancestor chain before increasing z-index.
Practice
- Place two tiles beside each other and scale the first; observe possible visual overlap without layout reflow.
- Compare transform-origin:center with top left.
- Swap rotate and translate order and record the difference.
- Disable transforms under prefers-reduced-motion when motion is unnecessary, while retaining visible hover/focus feedback.
हिन्दी संकेत: transform से box दिखने में बदलता है; पड़ोसी elements की normal-flow जगह अपने आप नहीं बदलती।
