Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Transforms Example</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-100 p-8 font-sans"> <p class="text-sm text-slate-500 mb-8 text-center">Hover over each card to see the transform in action.</p> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <!-- 1. Scale --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:scale-125 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:scale-125</p> </div> <!-- 2. Rotate --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-violet-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:rotate-45 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:rotate-45</p> </div> <!-- 3. Translate --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-emerald-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:-translate-y-4 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:-translate-y-4</p> </div> <!-- 4. Skew --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-rose-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:skew-x-12 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:skew-x-12</p> </div> <!-- 5. Scale Down --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-amber-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out active:scale-90 cursor-pointer"> <span class="text-white text-3xl">Click</span> </div> <p class="text-xs font-mono text-slate-600">active:scale-90</p> </div> <!-- 6. Rotate full --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-cyan-500 rounded-xl flex items-center justify-center shadow-md transition duration-500 ease-in-out hover:rotate-180 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:rotate-180</p> </div> <!-- 7. Combined: scale + rotate --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-pink-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:scale-110 hover:rotate-12 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">scale-110 + rotate-12</p> </div> <!-- 8. Translate X --> <div class="flex flex-col items-center gap-3"> <div class="w-24 h-24 bg-indigo-500 rounded-xl flex items-center justify-center shadow-md transition duration-300 ease-out hover:translate-x-4 cursor-pointer"> <span class="text-white text-3xl">Hover</span> </div> <p class="text-xs font-mono text-slate-600">hover:translate-x-4</p> </div> </div> <div class="mt-12 bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-2">Transform Origin</h2> <p class="text-sm text-slate-600 mb-4">Using <code class="bg-slate-100 px-1 rounded">origin-top-left</code> changes the pivot point for rotations and scaling.</p> <div class="flex gap-8 items-center"> <div class="flex flex-col items-center gap-2"> <div class="w-20 h-20 bg-slate-700 rounded-lg transition duration-300 hover:rotate-45 origin-center cursor-pointer"></div> <p class="text-xs font-mono text-slate-500">origin-center (default)</p> </div> <div class="flex flex-col items-center gap-2"> <div class="w-20 h-20 bg-slate-700 rounded-lg transition duration-300 hover:rotate-45 origin-top-left cursor-pointer"></div> <p class="text-xs font-mono text-slate-500">origin-top-left</p> </div> </div> </div> </body> </html>
