Web Analytics
☕ Coffee 𝕏 Follow
0%

CSS Transforms

Beginner ~9 min read

Rotate

rotate() rotates elements by a specified angle. Use degrees (deg) or turns.

HTML
CSS
JS

Scale

scale() resizes elements. Values > 1 enlarge, < 1 shrink. Use scaleX() or scaleY() for one axis.

HTML
CSS
JS

Translate

translate() moves elements from their current position. Use px, %, or other units.

HTML
CSS
JS

Skew

skew() tilts elements along the X or Y axis, creating a slanted effect.

HTML
CSS
JS

Combining Transforms

Chain multiple transforms in one transform property. Order matters!

HTML
CSS
JS

Transform Origin

transform-origin changes the pivot point for transforms. Default is center.

HTML
CSS
JS
Pro Tip: Use translate(-50%, -50%) with position: absolute; top: 50%; left: 50%; to perfectly center elements!

Summary

  • rotate(angle) - Rotate element
  • scale(x, y) - Resize element
  • translate(x, y) - Move element
  • skew(x, y) - Slant element
  • Chain transforms: transform: rotate() scale()
  • transform-origin - Change pivot point

Quick Quiz

Which transform function moves an element?

A
move()
B
translate()
C
shift()
D
position()
Previous Shadows
Next Transitions