0
0
Tailwindmarkup~5 mins

Transform (scale, rotate, translate) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Transforms let you change how an element looks by moving, turning, or resizing it without changing the page layout.

To make buttons grow bigger when hovered over for a nice effect.
To rotate an image slightly to make it look playful or dynamic.
To slide a menu in from the side when a user clicks a button.
To zoom in on a picture when a user focuses on it for better detail.
Syntax
Tailwind
class="transform scale-110 rotate-45 translate-x-4 translate-y-2"
Use transform class to enable transformations on an element.
Combine scale, rotate, and translate classes to change size, angle, and position.
Examples
This makes the text 25% bigger.
Tailwind
<div class="transform scale-125">Text bigger</div>
This rotates the text 90 degrees clockwise.
Tailwind
<div class="transform rotate-90">Rotated text</div>
This moves the text right and down by small steps.
Tailwind
<div class="transform translate-x-6 translate-y-3">Moved text</div>
This example combines scaling down, rotating slightly, and moving right.
Tailwind
<div class="transform scale-90 rotate-12 translate-x-2">Combined transform</div>
Sample Program

This page shows three boxes: a button that grows bigger when hovered, a box rotated 45 degrees, and a box moved right and down. The transform class enables the changes, and scale, rotate, translate classes adjust the look.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Transform Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-6 bg-gray-50">
  <button class="transform scale-110 bg-blue-500 text-white px-6 py-3 rounded hover:scale-125 transition-transform">
    Hover me to grow
  </button>
  <div class="transform rotate-45 bg-green-300 p-4 rounded">
    Rotated box
  </div>
  <div class="transform translate-x-8 translate-y-4 bg-red-300 p-4 rounded">
    Moved box
  </div>
</body>
</html>
OutputSuccess
Important Notes

Always add the transform class before scale, rotate, or translate classes to activate transformations.

Use transition-transform for smooth animation effects when transforms change.

Transforms do not affect the space the element takes on the page, so other elements stay in place.

Summary

Transforms let you move, rotate, or resize elements visually without changing layout.

Tailwind uses transform plus scale, rotate, and translate classes to apply these effects.

Combine transforms and add transitions for smooth interactive effects.