2D Transforms (Translate & Rotate)
What are 2D Transforms?
Imagine sliding a photo across a tabletop (Translate), spinning it around its center point (Rotate), or scaling its size up and down (Scale). The photo changes its size and angle, but it does not change the physical shape of the tabletop or push other items off the table.In CSS, the transform property allows you to visually manipulate elements in 2D space. The most powerful aspect of transforms is that they are calculated visual—they do not affect the layout position of surrounding elements.
Why does it matter?
2D transforms are essential for high-performance animations. Since they don't force the browser to recalculate the page layout flow, usingtransform: translate() to animate elements is much smoother and faster than animating properties like top or margin-left!
Syntax Breakdown
transform: translate(x, y); — Slides the element horizontally (x) and vertically (y).transform: rotate(45deg); — Rotates the element clockwise by 45 degrees.transform: scale(1.5); — Increases the element's size to 1.5 times its original size.Common Mistakes
transform: rotate(45deg); and then transform: scale(1.5); on the same element, the second line will overwrite the first! To apply both at once, write them in a single line: transform: rotate(45deg) scale(1.5);.Quick Reference
transform — Visual spatial manipulation property.translate(x, y) — Shifts visual coordinates.rotate(deg) — Rotates clockwise/counter-clockwise.scale(ratio) — Resizes element size scale.Your Task
Apply a 2D transform to `.rotated-box` to rotate the block by `45deg`.
index.html
Type code above to start the lesson.
Live Preview