Transform property in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS transform property do?

The transform property changes the shape, size, or position of an element without affecting the document layout. It can move, rotate, scale, or skew elements visually.

beginner

Name four common functions used with the transform property.

Common functions are:<br>1. translate(x, y) - moves the element.<br>2. rotate(angle) - rotates the element.<br>3. scale(x, y) - resizes the element.<br>4. skew(x-angle, y-angle) - slants the element.

beginner

How does transform: translate(50px, 100px); affect an element?

It moves the element 50 pixels to the right and 100 pixels down from its original position, without changing the space it takes in the page layout.

intermediate

What is the difference between transform: scale(2); and setting width and height to double?

Using scale(2) visually doubles the size but keeps the original layout space. Changing width and height actually changes the element's size and affects layout and surrounding elements.

intermediate

Why is transform useful for animations and interactions?

transform is smooth and fast because it uses the GPU for rendering. It lets you move, rotate, or scale elements without reflowing the page, making animations look better and perform well.

Which CSS property is used to move an element without changing its layout space?

A margin

B transform

C position

D padding

The transform property moves elements visually without affecting the layout space.

What does transform: rotate(45deg); do to an element?

A Moves it 45 pixels right

B Scales it to 45% size

C Rotates it 45 degrees clockwise

D Skews it by 45 degrees

The rotate(45deg) function turns the element 45 degrees clockwise.

Which transform function changes the size of an element?

A scale()

B rotate()

C skew()

D translate()

scale() changes the size of an element by stretching or shrinking it.

If you want to slant an element horizontally, which transform function do you use?

A translate()

B rotate()

C scale()

D skew()

skew() slants the element along the X or Y axis.

Why is using transform better for animations than changing top or left?

A It uses GPU for smoother animations

B It changes the layout faster

C It changes the element's size

D It disables user interaction

transform uses the GPU, making animations smoother and faster.

Explain how the CSS transform property can move, rotate, and scale an element. Give simple examples.

Think about how you can move or turn a picture without changing the space it takes on a wall.

Describe why transform is preferred for animations compared to changing position properties like top or left.

Imagine moving a toy on a table smoothly versus moving the whole table.