CSS Transforms: 2D & 3D Manipulations

translate, rotate, scale, skew, perspective, and transform-origin

« CSS Custom Properties (Variables)« Previous Modern CSS: :has(), clamp() & Subgrid »Next »

The transform property alters the geometry of elements, translating, rotating, scaling, or skewing in both 2D and 3D space without disrupting document layout flow.

2D & 3D Transform Functions

translate(x, y): Repositions elements along X and Y axes.

rotate(45deg) / rotateY(180deg): Rotates elements around an axis or point.

scale(1.1): Scales element size up or down proportionally.

perspective: 1000px: Sets the viewer distance from the screen, creating genuine 3D perspective depth for 3D card flips.

3D Card Flip on Hover

Try It Yourself »

.card-container {
  perspective: 1000px;
}

.card-inner {
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

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

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which property creates a 3D viewing perspective for child elements undergoing 3D transforms?

« Previous: CSS Custom Properties (Variables)Next: Modern CSS: :has(), clamp() & Subgrid »