CSS Transform & 3D

Difficulty: Intermediate

Question

What CSS transform functions are available? How do 3D transforms work?

Answer

CSS transform applies 2D or 3D spatial modifications without affecting document flow.

2D functions: translate(), rotate(), scale(), skew() 3D functions: translate3d(), rotate3d(), perspective()

Key points: - Transforms don't affect layout (other elements don't move) - GPU-accelerated for smooth performance - transform-origin changes the pivot point - perspective() creates depth for 3D effects - Transforms are composited (applied in order) - Multiple transforms on one line are applied right-to-left

Code examples

2D Transform Functions

/* Translate: move element */
.move {
  transform: translateX(50px);
  transform: translateY(-20px);
  transform: translate(50px, -20px);
}

/* Rotate: spin element */
.rotate {
  transform: rotate(45deg);
  transform-origin: top left; /* pivot point */
}

/* Scale: resize element */
.grow {
  transform: scale(1.5);      /* 150% */
  transform: scaleX(2);       /* stretch horizontal */
}

/* Skew: slant element */
.skew {
  transform: skew(10deg, 5deg);
}

/* Combining transforms (order matters!) */
.combined {
  transform: translate(100px, 0) rotate(45deg) scale(0.8);
  /* Applied right-to-left:
     1. scale, 2. rotate, 3. translate */
}

/* Center with transform */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Transform order matters because each transform changes the coordinate system. translate then rotate gives different results than rotate then translate.

3D Transforms and Perspective

/* Perspective on parent creates depth */
.scene {
  perspective: 1000px;
  /* Lower value = more dramatic 3D effect */
}

/* 3D card flip */
.card-container {
  perspective: 800px;
  width: 300px;
  height: 200px;
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.card-container:hover .card {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

perspective on the parent creates 3D space. transform-style: preserve-3d keeps children in 3D. backface-visibility: hidden hides the back of flipped elements.

Practical Transform Effects

/* Hover lift effect */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.15);
}

/* Image zoom on hover */
.image-container {
  overflow: hidden;
  border-radius: 0.5rem;
}
.image-container img {
  transition: transform 0.3s ease;
}
.image-container:hover img {
  transform: scale(1.1);
}

/* Tilt effect with perspective */
.tilt:hover {
  transform: perspective(500px)
    rotateX(5deg) rotateY(-5deg);
}

The hover lift and image zoom are the most common transform patterns in modern web design. Overflow: hidden on the container clips the scaled image.

Key points

• Transforms are GPU-accelerated - prefer them over margin/top for animation
• transform-origin defaults to center - change it for different pivot points
• 3D transforms need perspective on parent and preserve-3d for nested 3D

Concepts covered

Transform, Translate, Rotate, Scale, Perspective, 3D Transforms