transform-origin

Draft

Definition

The transform-origin CSS property is used to set the origin point or pivot point for transformations applied to an element using the transform property. It defines the point around which a transformation, such as rotation, scaling, or skewing, occurs.

The transform-origin property accepts one, two, or three values:

One value: Specifies both the horizontal and vertical origin. For example, transform-origin: 50% sets the origin point at the center of the element.
Two values: The first value sets the horizontal origin, and the second value sets the vertical origin. For example, transform-origin: left top sets the origin point at the top-left corner of the element.
Three values: The first value sets the horizontal origin, the second value sets the vertical origin, and the third value sets the depth or Z-axis origin. The third value is used for 3D transformations and is optional for 2D transformations.

Each value can be expressed as a length (e.g., px, em, rem), a percentage (e.g., %), or a keyword (e.g., top, bottom, left, right, center).

Here’s an example:

.box {
  transform-origin: top right;
}

In this example, the .box class sets the transform-origin property to top right, which sets the origin point at the top-right corner of the element.

The transform-origin property is commonly used in conjunction with the transform property to control the point around which transformations occur. By specifying a different origin, you can achieve effects such as rotating an element around a specific point or scaling an element from a particular position.

It’s important to note that the position of the origin is relative to the element itself, and changes to the origin can affect how transformations are applied. Also, keep in mind that different transformations, such as rotations, scalings, or translations, can interact with the origin point differently.

The transform-origin property is particularly useful when working with complex animations, transitions, or 3D transformations, where precise control over the transformation origin is necessary to achieve the desired visual effects.