## Are you ready?

**1** 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.