CSS Transforms

Introduction

CSS Transforms offer a powerful way to manipulate the appearance and positioning of elements on a web page without affecting their layout.

By applying transformations, you can create dynamic and engaging effects that enhance the user experience.

Understanding CSS Transforms

The transform property is used to apply transformations to elements.

Transform functions manipulate how an element is rendered visually.

• translate: Moves an element to a new position relative to its current location.
• rotate: Rotates an element around a specified point.
• scale: Resizes an element to a new width and height.
• skew: Skews an element along the X or Y axis.
• matrix: Applies a 2D transformation matrix to an element.

Applying Transforms to Elements

To apply a transform to an element, use the transform property and specify the desired transform function and its parameters.

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(2);
}

Hardware Acceleration

Using translate3d(x, y, 0) can trigger GPU compositing in many browsers, which may improve performance for animations and transitions.

Use this carefully. Hardware acceleration is useful, but it is not a magic fix for every animation problem.

.element {
  transform: translate3d(50px, 100px, 0);
}

Moving Elements

You can use translate to move elements in pixels or percentages relative to their current position.

The first value moves the element on the X axis. The second value moves it on the Y axis.

.element {
  transform: translate(50px, 100px);
}

.element-percent {
  transform: translate(50%, 20%);
}

Rotating Elements

Use rotate to rotate an element clockwise or counterclockwise. This is especially useful for creating interactive effects or rotating icons.

The transform-origin property changes the point an element rotates around.

.element {
  transform: rotate(45deg);
}

.corner-rotate {
  transform-origin: top left;
  transform: rotate(45deg) translate(20px, 20px);
}

Scaling Elements

Scaling allows you to resize elements proportionally or along specific axes. This is useful for responsive design and hover effects.

.element {
  transform: scale(1.2);
}

.wide-short {
  transform: scale(1.5, 0.8);
}

Skewing Elements

Skew transformations tilt elements along the X or Y axis, adding a dynamic visual twist.

.element {
  transform: skew(15deg, 5deg);
}

3D Transforms

3D transforms let you manipulate elements in three-dimensional space. Combine perspective, rotation, and positioning to create immersive interfaces.

.scene {
  perspective: 500px;
}

.element {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}

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;
  transition: transform 400ms ease;
}

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

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

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

3D Cube

A 3D cube is built by positioning six faces in 3D space and rotating the parent container.

.cube {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(35deg);
}

.cube-face {
  position: absolute;
  inset: 0;
}

.cube-front {
  transform: translateZ(75px);
}

.cube-back {
  transform: rotateY(180deg) translateZ(75px);
}

CSS Filters

CSS filters apply visual effects to elements. These can include blur, grayscale, contrast adjustments, and more.

Filters can enhance visual design and interaction, but they should not make content harder to read.

.image {
  filter: blur(5px) grayscale(50%);
}

Accessibility and Performance

• Ensure color contrast is maintained when applying filters.
• Allow users to disable motion-heavy effects when needed.
• Use translate3d carefully for better performance.
• Avoid animating layout-affecting properties such as width, height, top, left, and margin.
• Prefer transform and opacity for smoother interface motion.

.transition-example {
  transition: transform 200ms ease, opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .transition-example {
    transition: none;
  }
}