Transform (scale, rotate, translate) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to scale the box to 150% of its size using Tailwind CSS.

Tailwind

<div class="w-24 h-24 bg-blue-500 [1]"></div>

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

Ascale-150

Brotate-45

Ctranslate-x-4

Dscale-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using rotate or translate classes instead of scale.

Using scale-50 which makes the element smaller.

The scale-150 class scales the element to 150% of its original size.

2fill in blank

medium

Complete the code to rotate the box 90 degrees clockwise using Tailwind CSS.

Tailwind

<div class="w-24 h-24 bg-red-500 [1]"></div>

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

Ascale-90

Brotate-45

Ctranslate-y-6

Drotate-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using scale classes instead of rotate.

Choosing rotate-45 which rotates only 45 degrees.

The rotate-90 class rotates the element 90 degrees clockwise.

3fill in blank

hard

Fix the error in the code to translate the box 8 units to the right using Tailwind CSS.

Tailwind

<div class="w-24 h-24 bg-green-500 [1]"></div>

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

Atranslate-x-8

Btranslate-right-8

Ctranslate-8-x

Dtranslate-y-8

Attempts:

3 left

💡 Hint

Common Mistakes

Using translate-y-8 which moves vertically.

Using invalid class names like translate-8-x.

The correct class for moving an element 8 units right is translate-x-8.

4fill in blank

hard

Fill both blanks to scale the box to 75% and rotate it 180 degrees using Tailwind CSS.

Tailwind

<div class="w-24 h-24 bg-purple-500 [1] [2]"></div>

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

Ascale-75

Brotate-90

Crotate-180

Dscale-125

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up rotation degrees.

Using scale-125 which makes the element bigger.

scale-75 scales the element to 75% size, and rotate-180 rotates it 180 degrees.

5fill in blank

hard

Fill all three blanks to translate the box 4 units right, 6 units down, and rotate it 45 degrees using Tailwind CSS.

Tailwind

<div class="w-24 h-24 bg-yellow-500 [1] [2] [3]"></div>

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

Atranslate-x-4

Btranslate-y-6

Crotate-45

Dscale-100

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping x and y translations.

Using scale classes instead of translate or rotate.

translate-x-4 moves right 4 units, translate-y-6 moves down 6 units, and rotate-45 rotates 45 degrees.