CSS 2D and 3D Transforms

/* 2D transforms */
.translate {
  transform: translate(50px, 100px);
}

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

.scale {
  transform: scale(1.5);
}

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

/* Combined transforms */
.combined {
  transform: translate(20px, 20px) rotate(15deg) scale(1.1);
}

/* 3D transforms */
.rotate3d {
  transform: perspective(800px) rotateY(45deg);
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

/* Transform origin */
.pivot {
  transform-origin: top left;
  transform: rotate(30deg);
}

/* 3D cube */
.cube {
  transform-style: preserve-3d;
  animation: rotateCube 8s infinite linear;
}

@keyframes rotateCube {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

.cube .face {
  position: absolute;
  transform-style: preserve-3d;
}

.cube .front  { transform: translateZ(50px); }
.cube .back   { transform: rotateY(180deg) translateZ(50px); }
.cube .right  { transform: rotateY(90deg) translateZ(50px); }
.cube .left   { transform: rotateY(-90deg) translateZ(50px); }
.cube .top    { transform: rotateX(90deg) translateZ(50px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(50px); }

/* Scale on hover with smooth transition */
.zoom {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.zoom:hover {
  transform: scale(1.1);
}