CSS Transformations Quiz

Quiz 8 8 questions

Prerequisites for the quiz

  1. Whole CSS Transformations unit

Are you ready?

8 questions to solve

  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
How can we translate an element to the right by 500px?
All three functions listed above will move the element to the right by 500px. Hence the choice (D).
What will translate(0, 100%) do to an element?
When percentages appear in translate() they are always relative to the respective dimension where they're used. For the x parameter they are relative to the element's width, whereas for the y parameter, to its height.
How can we rotate an element clockwise by 45 degrees?
Clockwise means that we have to rotate the element by a positive value of 45deg. Hence the choice (A). Refer to CSS Transformations - Rotations for more info.
What will the rule transform: rotate(3.142rad) below do to an element?
A positive angle for the function rotate() makes an element rotate clockwise by the given angle. For more info refer to CSS Transformations - Rotations.
How can you achieve the following result for the div shown? (Angle of skew = 30deg).
Tilted element
The element is tilted in the x-axis hence skewX() would've been applied to it. Moreover since it is leaning forwards it would've had a negative skew angle. Hence the choice (B).
How can you both translate an element by the coordinates (300px, 400px) and rotate it counterclockwise by 30deg?
To add multiple transformations to an element we would have to add them, one after another, delimited by a space in the transform property.
Enlarge an element using the scale() function such that it becomes twice as big as before.
To make an element twice as big as before we have to enlarge it by a factor of 1.141 (which is the square root of two). For the answer to why we need to do so, please refer to CSS Transformations - Scaling.
What will transform: scaleX(2) do to an element?
scaleX(2) will enlarge an element to become twice as large horizontally as before. Refer to CSS Transformations - Scaling for more info.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage