DTC 355

CSS Transforms

The transform property lets you visually reposition, resize, or rotate an element without affecting the document flow. Other elements on the page don't move to accommodate the transformation—only the visual rendering changes.

Transforms are most useful when combined with transitions or hover states, where the change happens in response to something. On their own, they're static. Paired with interaction, they're one of the most effective tools for making a UI feel alive.

Translate

translate moves an element along the X and Y axes. Unlike margin or position, it doesn't push other elements around.

.card:hover {
     transform: translateY(-4px);
}

This is a common pattern for cards and buttons—a subtle upward shift on hover gives the impression of lift without any layout change.

Scale

scale resizes an element relative to its center point. A value of 1 is the original size. Values above 1 enlarge; below 1 shrink.

.thumbnail:hover {
     transform: scale(1.05);
}

Keep scale values subtle on hover—anything above 1.1 or so starts to feel heavy-handed in most UI contexts.

Rotate

rotate turns an element clockwise or counterclockwise from its center. Values are in degrees.

.icon:hover {
     transform: rotate(90deg);
}

Combining Transforms

Multiple transforms can be applied in a single declaration, separated by spaces. Order matters—transforms are applied right to left.

.card:hover {
     transform: translateY(-4px) scale(1.02);
}

Transform Origin

By default, transforms originate from the center of the element. You can change this with transform-origin.

.label {
     transform-origin: left center;
     transform: scaleX(1.1);
}

CSS Transitions

Transitions animate the change between two CSS states. Without a transition, a hover state snaps instantly. With one, the change eases in over a specified duration.

The browser handles all the in-between frames—you just define the start state, the end state, and how long the change should take.

The transition Property

The transition shorthand takes four values: the property to animate, the duration, the easing function, and an optional delay.

a {
     color: #333;
     transition: color 0.2s ease;
}

a:hover {
     color: #0057ff;
}

The transition goes on the base state, not the hover state. That way it animates both directions—in on hover, back out when the hover ends.

Transitioning Multiple Properties

You can transition multiple properties by separating them with commas, or use all to transition everything that changes. Using all is convenient but can cause unexpected transitions on properties you didn't intend to animate—listing properties explicitly is safer.

.btn {
     background-color: #0057ff;
     transform: translateY(0);
     transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
     background-color: #003ecc;
     transform: translateY(-2px);
}

Easing Functions

The easing function controls the acceleration curve of the transition. The most common values are:

• ease — starts slow, speeds up, ends slow. The default.
• ease-in — starts slow, ends fast. Feels like something accelerating.
• ease-out — starts fast, ends slow. Feels like something decelerating. Good for elements entering the screen.
• ease-in-out — slow at both ends. Smooth and symmetrical.
• linear — constant speed throughout. Mechanical feeling; rarely the right choice for UI.

Duration

Duration is specified in seconds (s) or milliseconds (ms). For most UI interactions—hovers, focus states, small movements—keep it between 150ms and 300ms. Anything slower starts to feel sluggish. Anything faster is hard to perceive.

What Can Be Transitioned

Not all CSS properties can be transitioned. A property needs to have intermediate values between its start and end states. Properties like color, background-color, opacity, transform, width, height, and box-shadow all transition well. Properties like display cannot be transitioned because there's no in-between state between block and none.

Assignments