← Back to Curriculum

CSS Transforms

📚 Lesson 11 of 16 ⏱️ 40 min

CSS Transforms

40 min

CSS Transforms allow you to modify the coordinate space of the CSS visual formatting model. Essentially, they let you change the shape and position of an element without affecting the normal document flow. The primary transform functions are `translate`, `rotate`, `scale`, and `skew`.

Transforms can be 2D or 3D. 2D transforms operate on the X and Y axes, while 3D transforms add the Z axis (depth). To see 3D effects, you often need to set a `perspective` on the parent container.

The `transform-origin` property is crucial; it defines the point around which a transformation is applied. By default, it's the center (50% 50%), but you can move it to any corner or side to create different effects, like a swinging door.

Transforms are highly performant because they are handled by the GPU (Graphics Processing Unit) in modern browsers, making them ideal for smooth animations.

Key Concepts

  • Transforms modify coordinate space.
  • Common functions: Translate, Rotate, Scale, Skew.
  • Transforms do not affect surrounding layout.
  • 3D transforms require perspective.
  • GPU acceleration ensures smooth performance.

Learning Objectives

Master

  • Applying 2D transform functions
  • Combining multiple transforms
  • Changing the transform-origin
  • Understanding the difference between translate and position: absolute

Develop

  • Spatial visualization skills
  • Creating interactive UI elements
  • Optimizing rendering performance

Tips

  • Use `translate` instead of `top/left` for animations to avoid repaints.
  • Combine transforms in one line: `transform: scale(1.1) rotate(5deg);`.
  • Use `backface-visibility: hidden` to fix flickering in some 3D transforms.
  • Remember that order matters: translate then rotate is different from rotate then translate.

Common Pitfalls

  • Thinking transforms affect the layout flow (they don't, elements might overlap neighbors).
  • Forgetting vendor prefixes (mostly not needed now, but good to know for old code).
  • Blurry text on scaled elements (try using `will-change: transform`).
  • Confusing `transform` (the property) with `transition` (the animation).

Summary

  • Transforms change shape and position.
  • They are purely visual and don't break layout.
  • They are the basis for modern web animation.
  • Hardware acceleration makes them fast.

Exercise

Create a div that rotates 45 degrees and scales to 1.5 times its original size on hover.

div {
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  transition: transform 0.3s ease;
}

div:hover {
  transform: rotate(45deg) scale(1.5);
}

Exercise Tips

  • Try changing transform-origin to see how it affects rotation: transform-origin: top left;
  • Combine multiple transforms: transform: translateX(50px) rotate(45deg) scale(1.2);
  • Use 3D transforms: transform: perspective(1000px) rotateY(45deg);
  • Add will-change: transform; for better performance on animations.

Code Editor

Output