.translate {
  transform: translate(50px, 100px); /* x, y */
}

.translateX {
  transform: translateX(50px);
}

.translateY {
  transform: translateY(100px);
}

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

.rotate-negative {
  transform: rotate(-90deg);
}

.scale {
  transform: scale(1.5); /* 150% size */
}

.scale-xy {
  transform: scale(2, 0.5); /* x, y */
}

.scaleX {
  transform: scaleX(1.5);
}

.scaleY {
  transform: scaleY(0.8);
}

.skew {
  transform: skew(20deg, 10deg); /* x, y */
}

.skewX {
  transform: skewX(20deg);
}

.skewY {
  transform: skewY(10deg);
}

.combined {
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

.multi {
  transform: translateX(100px) rotateZ(45deg) scale(1.5);
}

.element {
  transform-origin: center center; /* Default */
}

.top-left {
  transform-origin: top left;
}

.custom {
  transform-origin: 75% 25%;
}

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
}

.zoom-hover {
  transition: transform 0.3s ease;
}

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

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: rotate(15deg);
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.flip-card {
  perspective: 1000px;
}

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

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