CSS transforms

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A transform

B transition

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

A px

B deg

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

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

A translateX()

B translateY()

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

A No

B Yes

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1transform: rotate(90deg);		Atransform: translateX(50px);
2transform: scale(2);		Btransform: translateY(30px);
3Moves an element 50 pixels to the right along its horizontal baseline track.		CScales the visual layout of the element to twice its original coordinate size.
4Moves an element 30 pixels downwards along its vertical coordinate column.		DThe rotate function demands an explicit orientation angle suffix unit indicator like deg.
5transform: scale(2px);		ERotates the target element 90 degrees clockwise from its original orientation.
6transform: rotate(45);		FThe scale function expects a unitless ratio multiplier instead of fixed pixel dimension limits.

Definitions

transform

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.box { transform: ______(45deg); }

.icon { transform: _____(1.5); }

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

.btn:hover { _________: none; }

.item { transform: ______(2); }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A transform: scale(2); {

B display: block;

C }

Question 2

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

B color: white;

C }

Question 3

A .box {

B transform = rotate(180deg);

C }

Question 4

A .card {

B transform: rotating(45deg);

C }

Question 5

A .logo {

B width: 100px;

C transform: scale(2px);

D }

Answer Key

CSS transforms

Section A: Quick Questions

A — transform

B — deg

A — Doubles the visual size

A — translateX()

B — Yes

Section B: 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.

Section C: Definitions

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

Section D: Fill in the Blanks

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

.icon {
  transform: scale(1.5);
}

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

.btn:hover {
  transform: none;
}

.item {
  transform: scaleY(2);
}

Section E: Spot the Error

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

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

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

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

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