Introduction

CSS transformations allow you to change the shape, position, size, and orientation of elements without affecting the surrounding layout. They are GPU-accelerated, performant, and ideal for modern UI effects.

In this chapter, you will learn:

What transforms are and why they are efficient
Translate, Scale, Rotate, and Skew functions
Combining multiple transforms
2D vs 3D transformations
Real-world UI patterns (card lift, button press)

Translate (Move)

Moves an element from its original position without causing layout reflow.

/* Syntax */
transform: translateX(50px);
transform: translateY(20px);
transform: translate(50px, 20px); /* X, Y */

Tip: Always prefer transform: translate() over top/left for animations, as it is much smoother and more efficient.

Scale (Resize)

Increases or decreases element size.

/* Scale up by 10% */
.button:hover { transform: scale(1.1); }

/* Scale down */
.card:active { transform: scale(0.95); }

Rotate & Skew

Rotate

.icon { transform: rotate(45deg); }
.icon-reverse { transform: rotate(-30deg); }

Skew (Tilt)

.box { transform: skewX(15deg); }

Combining & Origin

Multiple Transforms

Transforms are applied from right to left.

/* Move up and scale */
.card:hover { 
  transform: translateY(-10px) scale(1.05); 
}

Transform Origin

Controls the pivot point of the transformation.

/* Rotate around top-left corner */
.element { transform-origin: top left; }

Real-World Examples

1. Card Lift Effect

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
}

2. Button Press

.button:active {
  transform: scale(0.96);
}

3. 3D Flip Concept

.card:hover {
  transform: rotateY(180deg);
}

Common Beginner Mistakes & Best Practices

Common Mistakes

Using transforms for page layout
Applying multiple transform properties separately (overwrites)
Forgetting transform-origin

Best Practices

Use transforms for UI feedback (hover, active)
Combine with transitions for smoothness
Keep effects subtle to avoid dizziness

Chapter Summary

In this chapter, you learned:

How to use translate, scale, rotate, and skew.
Why transforms are better than layout properties for animation.
How to combine transforms and use transform-origin.
Creating engaging UI effects using 2D and 3D transformations.

You now have full control over element movement and shape using CSS transforms.

CSS Transformations