Demon Tech Roadmap

CSS

CSS Transforms

CSS transforms rotate, scale, and move elements visually.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS transforms manipulate the geometry of an element. Developers use them to spin icons, zoom into images on hover, or slightly nudge an element without disrupting the surrounding layout. The browser renders transforms efficiently using hardware acceleration.

Example

1/* this scales an element */
2div {
3  transform: rotate(45deg);
4}
5
6.zoom:hover {
7  transform: scale(1.2);
8}

Key Points

The `rotate()` function spins the element.
The `scale()` function shrinks or enlarges the element.
The `translate()` function pushes the element horizontally or vertically.
The `skew()` function tilts the element on its axes.

CSS Transforms

Introduction

Example

Key Points

CSS Transitions