CSS Transforms and Filters

Introduction

transform changes how an element is visually rendered. It can move, rotate, scale, or tilt an element without changing the space that element occupies in the normal page layout.

filter changes how an element looks, such as making an image blurry, grayscale, brighter, darker, or higher contrast.

Lesson 16 focuses on transition. This lesson focuses on what transforms and filters do.

Transform vs Position

position changes how an element is placed in relation to the document, a parent, or the viewport.

transform changes the visual rendering of an element after layout has already happened. Other elements still behave as if the transformed element is in its original spot.

Understanding CSS Transforms

The transform property accepts one or more transform functions. Each function changes the element visually in a specific way.

Applying Transforms

You can combine multiple transform functions in one transform declaration.

The browser applies transform functions in order, so changing the order can change the final result.

.element {
  transform: translateX(2rem) rotate(6deg) scale(1.05);
}

Transform Order Matters

transform: translateX(4rem) rotate(15deg) does not behave the same as transform: rotate(15deg) translateX(4rem).

When a transform looks strange, check the order of the functions before changing the values.

.first {
  transform: translateX(4rem) rotate(15deg);
}

.second {
  transform: rotate(15deg) translateX(4rem);
}

Moving Elements with Translate

translate moves an element visually on the X axis, Y axis, or both. It is great for small interface movement because it does not push nearby content around.

.button:hover {
  transform: translateY(-0.25rem);
}

.card-label {
  transform: translate(1rem, -0.5rem);
}

Rotating Elements

rotate turns an element clockwise or counterclockwise. It is useful for arrows, icons, labels, stickers, and playful interface details.

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

.tilted-label {
  transform: rotate(-4deg);
}

Scaling Elements

scale visually resizes an element. Values above 1 make it larger, and values below 1 make it smaller.

Large scale values can cause overflow, so test the surrounding layout when an element grows.

.image-card:hover img {
  transform: scale(1.06);
}

.small-badge {
  transform: scale(0.9);
}

Skewing Elements

skew slants an element on the X axis, Y axis, or both. Use it sparingly because it can make text harder to read.

.accent-panel {
  transform: skewX(-8deg);
}

Transform Origin

transform-origin changes the point an element transforms around. The default is the center of the element.

This is useful when an arrow should rotate from its center, a door should swing from one edge, or a menu should grow from the top.

.door {
  transform-origin: left center;
  transform: rotateY(-20deg);
}

.dropdown-panel {
  transform-origin: top center;
  transform: scaleY(0.95);
}

Practical Transform Patterns

3D Transforms

3D transforms add depth. Use perspective on the parent and 3D transform functions, such as rotateY, on the child.

Start simple. 3D effects can become confusing quickly because you are working with depth as well as horizontal and vertical movement.

.scene {
  perspective: 800px;
}

.card {
  transform-style: preserve-3d;
  transform: rotateY(12deg);
}

Demo: Card Flip

A card flip uses perspective on the parent, transform-style on the inner card, and rotateY to reveal the back side.

.card-scene {
  perspective: 800px;
}

.card {
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}

.card-face {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

CSS Filters

filter applies visual effects to an element. Filters are especially common on images and decorative media.

Filters can improve mood and hierarchy, but they should not make content harder to read.

.image {
  filter: grayscale(50%) contrast(110%);
}

Common Filter Functions

Readable Image Treatment

A darkened image can make light text easier to read, but the final contrast still needs to be checked.

.hero-image {
  filter: brightness(65%) contrast(105%);
}

Performance and Motion Notes

• Prefer transform and opacity for visual movement because they usually avoid layout recalculation.
• Avoid using transforms to fake an entire page layout. Use layout tools for layout.
• Avoid heavy blur() on large areas unless the effect is really needed.
• Keep motion subtle. Large movement and dramatic scaling can distract users.
• Respect prefers-reduced-motion when transforms are used for animated effects.

@media (prefers-reduced-motion: reduce) {
  .motion-effect {
    transform: none;
  }
}

Common Mistakes