CSS transforms

A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.

Part of: HTML and CSS Journey — Module 60

What it does: translateX updates the element layout position along the horizontal plane by a fixed length unit. translateY operates explicitly on vertical offset dimensions to push elements up or down. The transform property alters visual coordinates, whereas transition governs property animation speeds. The rotate function specifies an angle of geometric turn, measured with the degree (deg) unit suffix. The scale function accepts unitless multiplier factors to magnify or shrink rendered layouts. The X suffix explicitly denotes modification tracks along horizontal pathways, while Y indicates vertical lanes. Passing a unitless decimal factor to scale is the correct way to modify graphic element sizes.

Common mistakes: Line 0 is incorrect because a property cannot be declared before the opening curly brace of a ruleset. Line 0 is incorrect because the transform rule is declared outside the block bounds of the CSS selector.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of CSS transforms (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which property modifies an element's spatial layout via rotation, scaling, or translation?

transformtransition

Matches

transform: scale(2px);

↓

The scale function expects a unitless ratio multiplier instead of fixed pixel dimension limits.

Applying

Meanings

Term

transform

Meaning

A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.

Practice

.img:hover {

Testing

Gaps

transform: (45deg);

Check Answer

Spots

1transform: scale(2); {

2 display: block;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which property modifies an element's spatial layout via rotation, scaling, or translation?

A. transform ✓

B. transition

The transform property alters visual coordinates, whereas transition governs property animation speeds.

2. What is the correct value unit measurement for the rotate() transform function parameter?

A. deg ✓

B. px

The rotate function specifies an angle of geometric turn, measured with the degree (deg) unit suffix.

3. Does scale(2) double the visual size of an element or move it forward by 2 pixels?

A. Doubles the visual size ✓

B. Moves it by 2 pixels

The scale function accepts unitless multiplier factors to magnify or shrink rendered layouts.

4. Which function moves an element horizontally along its lateral horizontal axis plane?

A. translateX() ✓

B. translateY()

The X suffix explicitly denotes modification tracks along horizontal pathways, while Y indicates vertical lanes.

5. Is transform: scale(1.5); valid CSS structural syntax layout markup?

A. Yes ✓

B. No

Passing a unitless decimal factor to scale is the correct way to modify graphic element sizes.

Match the Pairs

transform: rotate(90deg); → Rotates the target element 90 degrees clockwise from its original orientation.

transform: scale(2); → Scales the visual layout of the element to twice its original coordinate size.

Moves an element 50 pixels to the right along its horizontal baseline track. → transform: translateX(50px);

Moves an element 30 pixels downwards along its vertical coordinate column. → transform: translateY(30px);

transform: scale(2px); → The scale function expects a unitless ratio multiplier instead of fixed pixel dimension limits.

transform: rotate(45); → The rotate function demands an explicit orientation angle suffix unit indicator like deg.

Key Term

transform

A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.

Fill in the Blanks

1. .box { transform: rotate(45deg); }

Hint: Type the transform function used to spin an element around a fixed point

2. .icon { transform: scale(1.5); }

Hint: Type the transform function used to resize an element up or down

3. .card { transform: translate(10px, 20px); }

Hint: Type the transform function used to reposition an element along X and Y axes

4. .btn:hover { transform: none; }

Hint: Type the property name that controls visual rotation, scaling, and movement

5. .item { transform: scaleY(2); }

Hint: Type the function name that resizes an element only along its vertical Y-axis

Spot the Error

Question 1

A transform: scale(2); {

B display: block;

C }

Line A — Line 0 is incorrect because a property cannot be declared before the opening curly brace of a ruleset.

Question 2

A .button transform: rotate(90deg); {

B color: white;

C }

Line A — Line 0 is incorrect because the transform rule is declared outside the block bounds of the CSS selector.

Question 3

A .box {

B transform = rotate(180deg);

C }

Line B — Line 1 is incorrect because CSS properties are separated from values using a colon (:), not an equals sign (=).

Question 4

A .card {

B transform: rotating(45deg);

C }

Line B — Line 1 is incorrect because the function name is 'rotate', not 'rotating'.

Question 5

A .logo {

B width: 100px;

C transform: scale(2px);

D }

Line C — Line 2 is incorrect because the scale function requires a unitless numerical multiplier factor, not a pixel value.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?