CSS transform-origin Property

This CSS property is used to change the position of transformed elements. It is a point around which the transformation is applied. It establishes the origin of the transformation of an element. It can be applied to both 2D and 3D rotations.

The transform-origin property must be used with the transform property. The 2d transformation can change the x-axis and y-axis of the element, whereas the 3D transformation can change the z-axis along with the x-axis and y-axis.

This property can be specified by using one, two, or three values. The first value affects the horizontal position, the second value affects the vertical position, and the third value indicates the position of the z-axis. The third value can also work on 3D transformations and cannot be defined using a percentage.

  • If we specify only one value, the value must be a length or percentage, or one of the keyword values left, center, right, top, and bottom.
  • If we specify two values, the first value must be a length or percentage or the keyword values left, right, and center. The second value must be a length or percentage or one of the keyword values center, top, and bottom.
  • When we specify three values, then the first two values are same as the two-value syntax, but the third value represents the z-offset, so it must be a length.

CSS Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;

Example -