Mastering CSS `transform-origin`: Controlling the Center Point of Transformations

Learn how to precisely control the point around which transformations (rotate, scale, skew) are applied to HTML elements using CSS's `transform-origin` property. This tutorial explains different ways to set the transform origin (keywords, percentages, lengths), demonstrates their effects, and provides practical examples for creating dynamic and visually appealing animations.

Setting the Transform Origin with CSS `transform-origin`

Understanding `transform-origin`

The CSS `transform-origin` property specifies the point around which transformations (like rotation, scaling, skewing) are applied to an element. It determines the center point of the transformation. By default, the transform origin is the center of the element (50% 50%), but you can change this to create different visual effects.

`transform-origin` Syntax and Values

The syntax is:

transform-origin: ? | initial | inherit;

The values can be:

• `x-axis`: Horizontal position (length, percentage, keywords: `left`, `center`, `right`).
• `y-axis`: Vertical position (length, percentage, keywords: `top`, `center`, `bottom`).
• `z-axis`: Depth position (length only; used for 3D transforms; percentages are not allowed).
• `initial`: Resets the property to its default (50% 50%).
• `inherit`: Inherits the value from its parent element.

You can use one, two, or three values. Omitting values uses the default (50% 50% for 2D, 50% 50% 0 for 3D).

Examples: `transform-origin` in 2D Transformations

The following examples demonstrate the effect of `transform-origin` on 2D transformations (rotation). You would need to include the corresponding HTML and CSS to see these in a browser. The `transform-origin` and `transform` properties are applied to the same element. The examples use different value types (length, percentage, keywords) to showcase how they affect the rotation of an element.

Illustration 1: One Value (Length)

This example uses a length value (pixels) for `transform-origin`.

div {
  transform-origin: 50px;
  transform: rotate(45deg);
}

Illustration 2: One Value (Percentage)

This example uses a percentage value for `transform-origin`.

div {
  transform-origin: 60%;
  transform: rotate(45deg);
}

Illustration 3: One Value (Keyword)

This example uses keyword values for `transform-origin`.

div {
  transform-origin: top right;
  transform: rotate(45deg);
}

Illustration 4: Two Values (Length)

This example uses two length values (pixels) for `transform-origin`.

div {
  transform-origin: 45px 20px;
  transform: rotate(45deg);
}

Illustration 5: Two Values (Percentage)

This example uses two percentage values for `transform-origin`.

div {
  transform-origin: 50% 60%;
  transform: rotate(45deg);
}

Illustration 6: Two Values (Keywords)

This example uses keyword values for `transform-origin`.

div {
  transform-origin: left bottom;
  transform: rotate(45deg);
}

Examples: `transform-origin` in 3D Transformations

For 3D transformations, you'll specify three values: x, y, and z (z must be a length value, not a percentage). These examples use different value combinations for the transform-origin property in 3D transformations. You need the corresponding HTML and CSS, including a `transform: rotate3d()` declaration for these examples to be functional.

Illustration 1: Three Values (Length)

This example sets the `transform-origin` using length units (pixels).

Illustration 2: Two Percentages, One Length

This uses percentage values for the x and y axes, and length for the z axis.

Example 3: Two Keywords, One Length (3D Transform)

This example uses keywords for the x and y axes and a length value for the z-axis in a 3D transformation. This demonstrates how to use a combination of keywords and length values to define a transform origin for 3D transformations. Remember that you need corresponding HTML and CSS (including a `transform: rotate3d()` declaration) to view the 3D effect in a browser.

div {
  transform-origin: top right 150px; /* Example values */
  transform: rotate3d(1, 1, 1, 45deg);
}

Conclusion: Mastering `transform-origin`

The `transform-origin` property is essential for controlling how transformations are applied to elements. Understanding how to use it effectively, particularly with various value types (length, percentage, keywords) and across 2D and 3D transformations, allows for creating intricate and visually engaging effects. Remember that the `transform` property must be used in conjunction with `transform-origin` for transformations to be applied.