html
/

CSS Transform

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Transform

What is Transform?

The transform property allows you to modify the position, size, and shape of elements without affecting layout flow.

Translate (Move)

CSSRead-only
1
div {
  transform: translate(50px, 20px);
}

Rotate

CSSRead-only
1
div {
  transform: rotate(45deg);
}

Scale (Resize)

CSSRead-only
1
div {
  transform: scale(1.5);
}

Skew

CSSRead-only
1
div {
  transform: skew(20deg);
}

Multiple Transforms

CSSRead-only
1
div {
  transform: translate(50px, 0) rotate(30deg) scale(1.2);
}

Transform Origin

CSSRead-only
1
div {
  transform-origin: center;
}

3D Transform

CSSRead-only
1
div {
  transform: rotateX(45deg);
}

Transform Functions Overview

FunctionDescription
translate()Move element
rotate()Rotate element
scale()Resize element
skew()Skew element
rotateX/Y/Z()3D rotation

Best Practices

  • Use transform for animations (better performance)
  • Combine multiple transforms carefully
  • Use transform-origin for control
  • Prefer transform over position for movement

Common Mistakes

  • Overusing transforms causing confusion
  • Forgetting transform origin
  • Using position instead of transform for animation
  • Stacking transforms incorrectly

Conclusion

CSS transform is powerful for UI animations and effects. It allows efficient movement and scaling without affecting layout.

Try it yourself

div {
  transform: rotate(45deg);
}

Test Your Knowledge

Q1
of 3

Which rotates element?

A
translate()
B
rotate()
C
scale()
D
skew()
Q2
of 3

Which moves element?

A
scale()
B
rotate()
C
translate()
D
skew()
Q3
of 3

Which is 3D?

A
rotate()
B
translate()
C
rotateX()
D
scale()

Frequently Asked Questions

What does transform do?

Changes position, size, or shape of element.

Does transform affect layout?

No, it doesn't affect document flow.

Which is best for animation?

Transform is best for performance.

Previous

css animations

Next

css shadow

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.