Transform (scale, rotate, translate) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual result of this Tailwind transform?

Given this HTML snippet with Tailwind classes, what will you see in the browser?

<div class="w-24 h-24 bg-blue-500 transform scale-150"></div>

Tailwind

<div class="w-24 h-24 bg-blue-500 transform scale-150"></div>

A A blue square 1.5 times bigger than the original 6rem by 6rem size

B A blue square 0.5 times smaller than the original size

C A blue square translated 150 pixels to the right

D A blue square rotated 150 degrees

💡 Hint

Look at the scale-150 class and remember it changes size.

The scale-150 class in Tailwind scales the element to 1.5 times its original size. The original size is 6rem by 6rem (24 * 0.25rem). So the blue square becomes 9rem by 9rem visually.

📝 Syntax

intermediate

Which Tailwind class correctly rotates an element 45 degrees clockwise?

Choose the Tailwind class that rotates an element 45 degrees clockwise.

A rotate-90

B -rotate-45

C rotate45

D rotate-45

💡 Hint

Tailwind uses rotate- followed by the degree number without spaces.

The class rotate-45 rotates the element 45 degrees clockwise. Negative rotation uses a minus sign before the class, like -rotate-45. rotate--45 is invalid. rotate45 is not a valid Tailwind class.

🧠 Conceptual

advanced

What happens if you combine translate-x-4 and scale-50 on the same element?

Consider an element with these Tailwind classes: transform translate-x-4 scale-50. What is the combined effect?

A The element moves 1rem to the right and shrinks to half its size

B The element moves 4rem to the right and doubles in size

C The element moves 4 pixels to the right and shrinks to half its size

D The element moves 1rem to the left and doubles in size

💡 Hint

Remember Tailwind spacing units are multiples of 0.25rem. Also, scale-50 means 50% size.

translate-x-4 moves the element 1rem (4 * 0.25rem) to the right. scale-50 scales the element to 50% of its original size. Both transforms apply together.

❓ selector

advanced

Which Tailwind class applies a 90-degree counterclockwise rotation?

Choose the correct Tailwind class that rotates an element 90 degrees counterclockwise.

A rotate--90

B rotate-90

C -rotate-90

D rotate-270

💡 Hint

Negative rotation classes start with a minus sign before the class name.

-rotate-90 rotates the element 90 degrees counterclockwise. rotate-90 is clockwise. rotate--90 is invalid syntax. rotate-270 rotates 270 degrees clockwise, which is equivalent but not the standard negative 90.

❓ accessibility

expert

How to ensure keyboard users notice a translated and scaled focus ring in Tailwind?

You have a button with transform scale-110 translate-y-1 on focus. What is the best way to keep the focus ring accessible and visible for keyboard users?

A Add <code>focus:outline-none</code> to remove the default focus ring

B Use <code>focus-visible:ring-4 focus-visible:ring-blue-500</code> with transform classes

C Apply <code>pointer-events-none</code> to the button on focus

D Use <code>focus:opacity-0</code> to hide the button on focus

💡 Hint

Focus rings help keyboard users see where they are. Tailwind has special classes for focus-visible.

Using focus-visible:ring-4 focus-visible:ring-blue-500 adds a visible ring only when keyboard focus is active, ensuring accessibility. Removing outlines or hiding the button breaks accessibility. pointer-events-none disables interaction, which is not good.

Practice

1. What does the Tailwind class scale-110 do to an element?

easy

A. It makes the element 110% transparent.

B. It rotates the element by 110 degrees.

C. It makes the element 10% larger than its original size.

D. It moves the element 110 pixels to the right.

Solution

1. Step 1: Understand the scale utility

   The scale-110 class in Tailwind increases the size of the element by 110%, which means 10% larger than normal.

2. Step 2: Differentiate from other transforms

   Rotation and translation use different classes like rotate- and translate-. Transparency uses opacity classes, not scale.

3. Final Answer:

   It makes the element 10% larger than its original size. -> Option C

4. Quick Check:

   scale-110 means 110% size = 10% larger [OK]

Hint: Scale classes change size by percentage, not position or rotation [OK]

Common Mistakes:

• Confusing scale with rotate or translate
• Thinking scale changes transparency
• Assuming scale-110 means 110 pixels

2. Which Tailwind class correctly rotates an element by 45 degrees clockwise?

easy

A. rotate-45

B. scale-45

C. translate-45

D. rotate-90

Solution

1. Step 1: Identify rotation classes

   Tailwind uses rotate- followed by degrees to rotate elements. rotate-45 means rotate 45 degrees clockwise.

2. Step 2: Exclude other transform types

   scale- changes size, translate- moves position, and rotate-90 rotates 90 degrees, not 45.

3. Final Answer:

   rotate-45 -> Option A

4. Quick Check:

   rotate-45 means 45 degrees rotation [OK]

Hint: Rotate classes use degrees, scale and translate do not rotate [OK]

Common Mistakes:

• Using scale or translate classes for rotation
• Choosing wrong rotation degree
• Confusing clockwise and counterclockwise directions

3. What visual effect will this Tailwind code produce?

<div class="transform translate-x-4 rotate-90 scale-50 bg-blue-500 w-20 h-20">Box</div>

medium

A. A blue box normal size, no rotation, moved right by 4rem

B. A blue box twice its size, rotated 90 degrees, moved left by 4rem

C. A blue box half its size, rotated 45 degrees, moved right by 4rem

D. A blue box half its size, rotated 90 degrees, moved right by 1rem

Solution

1. Step 1: Decode each transform class

   translate-x-4 moves the element right by 1rem (4 * 0.25rem), rotate-90 rotates it 90 degrees clockwise, and scale-50 scales it to 50% size (half).

2. Step 2: Combine visual effects

   The box will appear smaller (half size), rotated on its center by 90 degrees, and shifted right by 1rem. The background and size classes set color and base size.

3. Final Answer:

   A blue box half its size, rotated 90 degrees, moved right by 1rem -> Option D

4. Quick Check:

   translate-x-4 = 1rem right, rotate-90 = 90°, scale-50 = half size [OK]

Hint: Translate-x-4 equals 1rem right, scale-50 halves size [OK]

Common Mistakes:

• Misreading translate-x-4 as 4rem
• Confusing rotate-90 with rotate-45
• Assuming scale-50 means double size

4. Identify the error in this Tailwind class usage:

<div class="transform scale-150 rotate-360 translate-y-6px">Content</div>

medium

A. translate-y-6px is invalid; Tailwind uses spacing scale, not px units

B. rotate-360 is invalid; rotation max is 180 degrees

C. scale-150 is invalid; scale max is 100

D. transform class is missing

Solution

1. Step 1: Check translate-y syntax

   Tailwind translate classes use predefined spacing scale like translate-y-6, not custom units like 6px. So translate-y-6px is invalid.

2. Step 2: Verify rotate and scale values

   rotate-360 is valid (full rotation), and scale-150 is valid (150% size). The transform class is present.

3. Final Answer:

   translate-y-6px is invalid; Tailwind uses spacing scale, not px units -> Option A

4. Quick Check:

   Tailwind translate uses scale numbers, not px [OK]

Hint: Tailwind translate classes never use px units, only scale numbers [OK]

Common Mistakes:

• Using px units in translate classes
• Thinking rotate-360 is invalid
• Assuming scale-150 is out of range

5. You want a button that grows 25% bigger and rotates 15 degrees clockwise when hovered. Which Tailwind classes achieve this effect?

hard

A. transform scale-125 rotate-15 hover transition duration-300

B. transform hover:scale-125 hover:rotate-15 transition duration-300

C. hover:transform scale-125 rotate-15 transition duration-300

D. transform hover:scale-150 hover:rotate-90 transition duration-300

Solution

1. Step 1: Use hover prefix for interactive effects

   To apply scale and rotate only on hover, use hover:scale-125 and hover:rotate-15. The base transform class enables transforms.

2. Step 2: Add smooth transition

   Include transition duration-300 for smooth animation over 300ms. Other options either miss hover prefixes or use wrong values.

3. Final Answer:

   transform hover:scale-125 hover:rotate-15 transition duration-300 -> Option B

4. Quick Check:

   Hover scale 125 + rotate 15 + transition = transform hover:scale-125 hover:rotate-15 transition duration-300 [OK]

Hint: Use hover: prefix for hover effects and transform to enable transforms [OK]

Common Mistakes:

• Missing hover: prefix on scale or rotate
• Using wrong scale or rotate values
• Not including transform class