<!-- scale: enlarge or shrink -->
.element {
  transform: scale(1.5);
  /* Grows 150% - 1.5x larger */
}

<!-- Element becomes 50% larger -->

/* scale less than 1: shrink -->
.element {
  transform: scale(0.8);
  /* Shrinks to 80% - 20% smaller */
}

<!-- Element becomes 20% smaller -->

/* Separate axis scaling: scaleX and scaleY -->
.element {
  transform: scaleX(2);  /* double width -->
}

.element {
  transform: scaleY(1.5);  /* 150% height -->
}

/* Negative scale: flip the element -->
.element {
  transform: scaleX(-1);  /* flip horizontally -->
}

.element {
  transform: scaleY(-1);  /* flip vertically -->
}

<!-- Element is mirrored -->

/* Combined: both axes with different values -->
.element {
  transform: scale(2, 1.5);
  /* scaleX: 2, scaleY: 1.5 */
}

<!-- Width doubles, height grows 50% -->

<!-- Hover grow effect -->
.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.1);
  /* Slightly larger on hover */
}

<!-- Button appears to grow -->

/* Click/press effect -->
.button:active {
  transform: scale(0.95);
  /* Shrink slightly when clicked */
}

<!-- Button appears pressed -->

/* Icon scaling on focus -->
.icon-button {
  transition: transform 0.3s ease;
}

.icon-button:focus {
  transform: scale(1.2);
  /* Grow on focus for accessibility */
}

<!-- Icon becomes more visible -->

/* Image zoom on hover -->
.image {
  overflow: hidden;
  /* Hide scaled overflow */
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.1);
  /* Subtle image zoom -->
}

<!-- Image appears closer -->

/* Card flip with scale -->
.card {
  perspective: 1000px;
  transition: transform 0.6s;
}

.card:hover {
  transform: scaleY(1.1) rotateX(5deg);
  /* Grow slightly and tilt -->
}

<!-- Card lifts with subtle growth -->

<!-- Pulse animation with scale -->
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.indicator {
  animation: pulse 2s infinite;
}

<!-- Element pulses in and out -->

/* Grow on scroll or interaction -->
.element {
  transition: transform 0.3s ease;
}

.element.active {
  transform: scale(1.2);
}

<!-- Size changes on state change -->

/* Different scale for different axis */
.element {
  transition: transform 0.3s;
}

.element:hover {
  transform: scaleX(1.2) scaleY(1.1);
  /* Wider and taller on hover -->
}

<!-- Non-uniform scaling -->

/* Flip effect with scale -->
.card {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card.flipped {
  transform: scaleX(-1) rotateY(180deg);
}

<!-- Flip horizontally -->

/* Scale with translation -->
.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.2) translateY(-10px);
  /* Grow and move up together -->
}

<!-- Bounce zoom effect -->

/* Magnifying glass effect -->
.zoom-area {
  position: relative;
  overflow: hidden;
}

.zoom-area:hover img {
  transform: scale(1.5);
  /* Zoom in on hover -->
}

<!-- Image zooms in when parent hovered -->

/* Button with ripple scale -->
.button::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

<!-- Ripple effect on click -->

<!-- Default: scale from center -->
.element {
  transform: scale(2);
  /* Grows from center -->
}

<!-- Both edges move away from center -->

/* Change origin point -->
.element {
  transform: scale(2);
  transform-origin: top left;
  /* Scale grows down and right from top-left -->
}

<!-- Scale from corner instead of center -->

/* Different origin positions -->
.element {
  transform-origin: top;
  transform: scale(1.5);
  /* Grows downward from top -->
}

.element {
  transform-origin: bottom right;
  transform: scale(2);
  /* Grows up and left from bottom-right -->
}

/* Origin with percentages -->
.element {
  transform-origin: 25% 75%;
  transform: scale(2);
  /* Scale from custom point -->
}

/* Practical: scale from corner -->
.menu-button {
  transition: transform 0.3s;
  transform-origin: top left;
}

.menu-button.expanded {
  transform: scale(1.2);
  /* Grows down and right from button -->
}

<!-- Dropdown grows from button origin -->

/* Scale from bottom right for dismiss -->
.modal {
  transform-origin: bottom right;
  transition: transform 0.3s;
}

.modal.closing {
  transform: scale(0);
  /* Shrinks to bottom-right corner -->
}

<!-- GPU-accelerated: scale is fast -->
.element {
  transform: scale(1.2);  /* GPU accelerated, 60fps -->
}

/* Better than: */
.element {
  width: 120%;  /* Reflow required, slower -->
}

<!-- Transform is always faster -->

/* Combine scale with other transforms -->
.element {
  transform: scale(1.1) translateY(-5px) rotateZ(5deg);
  /* All in one transform, single operation -->
}

/* Avoid animating width/height -->
.wrong {
  transition: width 0.3s, height 0.3s;  /* Slow */
}

.right {
  transition: transform 0.3s;
  transform: scale(1.1);  /* Fast */
}

<!-- Transform is faster than size changes -->

/* will-change hint -->
.element {
  will-change: transform;
  /* Hint browser to optimize -->
}

.element:hover {
  transform: scale(1.2);
}

<!-- Optional: only use for frequent transforms -->

/* Accessibility: skip scale on reduced motion -->
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
    transform: scale(1);
  }
}

<!-- Respect user motion preferences -->