Transform (scale, rotate, translate) in Tailwind - Mini Project: Build & Apply

Transform Elements with Tailwind CSS

📖 Scenario: You are creating a simple webpage with a colored square. You want to apply different transformations to this square using Tailwind CSS classes.

🎯 Goal: Build a webpage with a square <div> that you will scale, rotate, and translate step-by-step using Tailwind CSS transform classes.

📋 What You'll Learn

Create a square <div> with a background color and fixed size

Add a Tailwind CSS class to scale the square to 125%

Add a Tailwind CSS class to rotate the square by 45 degrees

Add a Tailwind CSS class to translate the square 10 units right and 5 units down

💡 Why This Matters

🌍 Real World

Transformations like scaling, rotating, and translating elements are common in web design to create interactive and visually appealing interfaces.

💼 Career

Knowing how to use CSS transforms with utility-first frameworks like Tailwind CSS is valuable for frontend developers to quickly style and animate UI components.

1

Create the square <div>

Create a <div> with the classes bg-blue-500, w-24, and h-24 inside the <main> element.

Tailwind

  
  
  Transform with Tailwind
  


  
    
  

Need a hint?

Use bg-blue-500 for background color and w-24 h-24 for width and height.

2

Scale the square to 125%

Add the Tailwind CSS class scale-125 to the existing <div> to scale it to 125%.

Tailwind

  
  
  Transform with Tailwind
  


  
    
    
  

Need a hint?

Use the scale-125 class to enlarge the element by 25%.

3

Rotate the square by 45 degrees

Add the Tailwind CSS class rotate-45 to the <div> to rotate it 45 degrees clockwise.

Tailwind

  
  
  Transform with Tailwind
  


  
    
    
  

Need a hint?

Use the rotate-45 class to rotate the element 45 degrees clockwise.

4

Translate the square 10 units right and 5 units down

Add the Tailwind CSS classes translate-x-10 and translate-y-5 to the <div> to move it 2.5rem right and 1.25rem down.

Tailwind

  
  
  Transform with Tailwind
  


  
    
    
  

Need a hint?

Use translate-x-10 to move right and translate-y-5 to move down.