Transform property in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to rotate the box by 45 degrees.

CSS

div {
  transform: [1](45deg);
}

Drag options to blanks, or click blank then click option'

Arotate

Bscale

Ctranslate

Dskew

Attempts:

3 left

💡 Hint

Common Mistakes

Using scale or translate instead of rotate.

Forgetting the unit 'deg' after the number.

The rotate() function rotates an element by the specified angle.

2fill in blank

medium

Complete the code to move the box 100 pixels to the right.

CSS

div {
  transform: [1](100px, 0);
}

Drag options to blanks, or click blank then click option'

Arotate

Btranslate

Cscale

Dskew

Attempts:

3 left

💡 Hint

Common Mistakes

Using rotate or scale instead of translate.

Not specifying both X and Y values.

The translate() function moves an element horizontally and vertically.

3fill in blank

hard

Fix the error in the code to scale the box to twice its size.

CSS

div {
  transform: [1](2);
}

Drag options to blanks, or click blank then click option'

Atranslate

Brotate

Cskew

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using translate or rotate instead of scale.

Forgetting to use a number inside the parentheses.

The scale() function changes the size of an element. Using scale(2) doubles its size.

4fill in blank

hard

Fill both blanks to skew the box 20 degrees horizontally and 10 degrees vertically.

CSS

div {
  transform: skew([1]deg, [2]deg);
}

Drag options to blanks, or click blank then click option'

A20

B10

C45

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the two angles.

Using angles that are too large or unrelated.

The skew() function tilts an element by the given angles horizontally and vertically.

5fill in blank

hard

Fill all three blanks to rotate the box 90 degrees, then move it 50px right and 20px down.

CSS

div {
  transform: [1](90deg) [2](50px, [3]);
}

Drag options to blanks, or click blank then click option'

Ascale

Btranslate

C20px

Drotate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up rotate and translate order.

Forgetting units like 'px' or 'deg'.

First, rotate(90deg) turns the box. Then, translate(50px, 20px) moves it right and down.