Advanced Features

CSS Transforms

Translate, rotate, scale, and skew elements in 2D and 3D.

12D Transforms

Move, rotate, scale, and skew without affecting layout.

Example Code

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

Add depth with perspective and 3D rotation.

Example Code

.scene { perspective: 800px; }
.card {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.card:hover { transform: rotateY(180deg); }

Change the pivot point for transforms.

Example Code

.flag {
  transform-origin: top left;
  transform: rotate(8deg);
}

Finished reading?

Mark this topic as complete to track progress.