Transforms and Transitions

What Is It?

A transform visually moves, rotates, or scales a box. A transition interpolates a property change over a duration.

Properties, Tags and Attributes Explained

• transform: translateY(): Visually moves an element vertically without reserving new layout space.
• scale() / rotate(): Resize or rotate the painted element.
• transition: Defines which property changes animate and for how long.
• prefers-reduced-motion: A media feature for a user preference to reduce motion.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Gentle button feedback

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transforms and Transitions</title>
  <style>
    button { padding: 12px 20px; background: #1d4ed8; color: white; border: 0; transition: transform 180ms ease, background-color 180ms ease; }
    button:hover, button:focus-visible { transform: translateY(-3px); background: #1e3a8a; }
    @media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover, button:focus-visible { transform: none; } }
  </style>
</head>
<body>
  <button type="button">Hover or focus</button>
</body>
</html>

What you see: The button gently rises on hover or focus unless reduced motion is preferred.

Example 2: Transform an accent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transforms and Transitions</title>
  <style>
    .tile { width: 90px; padding: 24px 8px; text-align: center; background: #fde68a; transform: rotate(-6deg); margin: 20px; }
  </style>
</head>
<body>
  <div class="tile">CSS</div>
</body>
</html>

What you see: The tile rotates while its original layout space stays the same.

When and Where to Use It

Use small transitions to clarify a state change, such as a button responding to interaction.

Common Mistake or Useful Tip

Avoid transition: all when only a few properties need animation. A transform can create a stacking context.

Try It Yourself

Change translateY to scale(1.03) and compare the feedback.