Rotate an element — practice exercise

What you'll be asked to do

1. 1.Rotate an elementexercise · easy · 10 min

   Rotate #box by 45 degrees using the rotate property.

   Passes when: Rotate #box by 45 degrees using the rotate property.

2. 2.Scale an elementexercise · easy · 10 min · practice plan

   Scale #box to 1.5 times its size.

   Passes when: Scale #box to 1.5 times its size.

3. 3.Move an elementexercise · easy · 10 min · practice plan

   Translate #box 10px right and 20px down.

   Passes when: Translate #box 10px right and 20px down.

4. 4.Change the originexercise · easy · 10 min · practice plan

   Set the transform origin of #box to its top-left corner.

   Passes when: Set the transform origin of #box to its top-left corner.

5. 5.Combine transformsexercise · medium · 10 min · practice plan

   Rotate #box 30 degrees and scale it to 2.

   Passes when: Rotate #box 30 degrees and scale it to 2.

6. 6.Fix the angle with no unitbug fix · easy · 8 min

   An angle needs a unit such as deg.

   Passes when: An angle needs a unit such as deg.

7. 7.Fix the scale given a lengthbug fix · easy · 8 min · practice plan

   scale takes a plain number, not a length.

   Passes when: scale takes a plain number, not a length.

8. 8.Fix the swapped translationbug fix · easy · 8 min · practice plan

   The horizontal value comes first.

   Passes when: The horizontal value comes first.

9. 9.Fix the misspelled propertybug fix · easy · 8 min · practice plan

   The property is transform-origin.

   Passes when: The property is transform-origin.

10. 10.Fix the transform on the wrong elementbug fix · easy · 8 min · practice plan

    The inner box should rotate, not the wrapper.

    Passes when: The inner box should rotate, not the wrapper.

Between them these tasks cover Individual transform properties, transform-origin and Composing transforms.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.