🎨 CSS Transform Properties Complete Guide

1. Translate (Move Elements)

The translate functions move elements from their original position.

translateX()

transform: translateX(30px);

Moves element horizontally

translateY()

transform: translateY(-30px);

Moves element vertically

translate()

transform: translate(20px, -20px);

Moves element in both directions

translate3d()

transform: translate3d(20px, -20px, 10px);

3D translation with Z-axis

2. Scale (Resize Elements)

The scale functions change the size of elements.

scale()

↗

transform: scale(1.3);

Scales uniformly larger

scale() smaller

↙

transform: scale(0.7);

Scales uniformly smaller

scaleX()

←→

transform: scaleX(1.5);

Scales horizontally only

scaleY()

↕

transform: scaleY(1.5);

Scales vertically only

scale3d()

transform: scale3d(1.2, 0.8, 1.1);

3D scaling with different values

3. Rotate (Turn Elements)

The rotate functions turn elements around different axes.

rotate()

↻

transform: rotate(45deg);

2D rotation

rotateX()

⤴

transform: rotateX(60deg);

Rotation around X-axis

rotateY()

⤵

transform: rotateY(60deg);

Rotation around Y-axis

rotateZ()

↻

transform: rotateZ(45deg);

Rotation around Z-axis (same as rotate)

rotate3d()

transform: rotate3d(1, 1, 0, 45deg);

3D rotation with custom axis

4. Skew (Distort Elements)

The skew functions distort elements by tilting them.

skewX()

⧸

transform: skewX(20deg);

Horizontal skewing

skewY()

⧹

transform: skewY(20deg);

Vertical skewing

skew()

⧸⧹

transform: skew(15deg, 10deg);

Both horizontal and vertical skewing

5. Matrix (Advanced Transforms)

Matrix functions allow complex transformations using mathematical matrices.

matrix()

transform: matrix(1.2, 0.3, -0.3, 1.2, 20, 20);

2D matrix transformation

matrix3d()

transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1);

3D matrix transformation

Matrix Values: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

6. Combined Transforms

You can combine multiple transform functions by separating them with spaces.

Multiple Transforms

ALL

transform: translateX(20px) rotate(45deg) scale(1.2);

Combines translation, rotation, and scaling

7. Transform Origin

The transform-origin property sets the point around which transformations occur.

top left

transform-origin: top left;

center (default)

transform-origin: center;

bottom right

transform-origin: bottom right;

8. Transform Style

The transform-style property controls how child elements are rendered in 3D space.

preserve-3d

transform-style: preserve-3d;

Preserves 3D positioning of child elements

9. Perspective

The perspective property adds depth to 3D transformations.

With Perspective

perspective: 500px;

Creates depth for 3D transforms

💡 Pro Tips:

Use transform instead of changing position properties for better performance
Combine transforms in one declaration for better performance
Use transform3d() or translateZ(0) to enable hardware acceleration
Remember that transforms don't affect the document flow
Use transition with transform for smooth animations

✨ Hover over the colored boxes to see the transforms in action!