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.