CSS 3D Transforms

3D Transform Functions

rotateX(), rotateY(), rotateZ() rotate in 3D space.

translateZ() moves element along Z-axis (toward/away from viewer).

perspective sets viewing distance for 3D effects.

transform-style: preserve-3d maintains 3D for children.

backface-visibility controls visibility of element back.

/* Container with perspective */
.container {
  perspective: 1000px;
}

/* 3D rotation */
.card {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

/* Flip card effect */
.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

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

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