Are you ready?
8 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- 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.
