transform-origin

by

transform-origin specifies the point within an element around which transformations are applied.

  • Default value: 50% 50% (center of the element).

Syntax

transform-origin: <x-offset> <y-offset> [<z-offset>];
  • x-offset: Horizontal position relative to the element’s left edge.
  • y-offset: Vertical position relative to the element’s top edge.
  • z-offset: Optional depth position relative to the element’s z-axis (3D transformations).

Value Types

  • Keywords: top, right, bottom, left, center (can be combined, e.g., top right).
  • Percentages: Relative to the element’s dimensions (e.g., 25% 75%).
  • Lengths: Absolute values (e.g., 10px 20px).

Examples

/* Rotate an element around its top-left corner: */
.element {
  transform-origin: 0 0;
  transform: rotate(45deg);
}

/* Scale an element from its center: */
.element {
  transform-origin: center;
  transform: scale(2);
}

/* Translate an element from its bottom-right corner: */
.element {
  transform-origin: bottom right;
  transform: translate(100px, -50px);
}

/* Rotate an element in 3D around its center: */
.element {
  transform-origin: center center 50px;
  transform: rotateX(30deg) rotateY(45deg);

Key Points

  • Understanding transform-origin is crucial for precise control over transformations.
  • Experiment with different values to achieve desired effects.
  • Combine with other transform properties for complex animations and effects.
  • Consider using browser developer tools to visualize and adjust transform-origin values.