Test your knowledge: Transforms and Coordinate Systems

Check your understanding of CSS transform geometry, composition, origins, reference boxes, 3D projection, and ownership boundaries.

13 questions ~6 min Intermediate

Knowledge check

Test your knowledge: Transforms and Coordinate Systems

Check your understanding of CSS transform geometry, composition, origins, reference boxes, 3D projection, and ownership boundaries.

Stuck? Each question has an optional hint.
Skip a hard question and review it before your results.
Questions and answer options can shuffle between attempts.

You can retake this quiz whenever you like.

0:00

0/0

Review

What does a transform primarily change?

Transforms map the rendered geometry without replacing the underlying layout algorithm.
Which function moves transformed geometry without scaling or rotating it?

Translation changes position in the transform mapping.
What does `scaleY(.5)` do?

scaleY supplies the scale factor for the y axis.
Why can changing transform function order change the result?

Composition is order-sensitive because the operations are combined into a transform mapping.
What does `transform-origin` establish?

The transform origin identifies the point about which transformations are applied.
Which property selects the reference box for transform geometry?

transform-box selects the reference box used by transform geometry.
Which statement is correct?

The two mechanisms occupy different parts of the 3D transform model.
What does `transform-style: preserve-3d` do?

preserve-3d prevents the relevant 3D descendant space from being flattened into the parent plane.
Which property controls visibility of a 3D element’s rear face?

backface-visibility controls whether the back face is visible.
A transformed box extends outside its original box and gets clipped. Which owner handles clipping?

Transforms creates the geometry; Overflow owns clipping and scrollable overflow behavior.
If the question is how a changing transform value is interpolated over time, which owner applies?

Transforms defines the value and geometry; Transitions owns interpolation and lifecycle.
What is the current W3C status distinction used for this lesson?

The current index lists CSS Transforms Level 1 as Candidate Standard and Level 2 as Draft Standard.
Why might an author use `translate`, `rotate`, or `scale` instead of putting the function in `transform`?

The individual properties let authors specify simple translations, rotations, and scales independently instead of placing those functions in the transform list.

Back to lesson Next: CSS Easing Functions

Test your knowledge: Transforms and Coordinate Systems

Test your knowledge: Transforms and Coordinate Systems

What does a transform primarily change?

Which function moves transformed geometry without scaling or rotating it?

What does `scaleY(.5)` do?

Why can changing transform function order change the result?

What does `transform-origin` establish?

Which property selects the reference box for transform geometry?

Which statement is correct?

What does `transform-style: preserve-3d` do?

Which property controls visibility of a 3D element’s rear face?

A transformed box extends outside its original box and gets clipped. Which owner handles clipping?

If the question is how a changing transform value is interpolated over time, which owner applies?

What is the current W3C status distinction used for this lesson?

Why might an author use `translate`, `rotate`, or `scale` instead of putting the function in `transform`?

Quiz results

Review