CSS transform-origin property

CSS transform-origin

CSS transform-origin is used to change the transformed elements position.

2D and 3D transformation can be done, using this property.

2D transformation changes the x-axis and y-axis element.

3D transformation changes the x-axis, y-axis and z-axis element.

Example

Try Yourself

There are three ways to use the CSS transform-origin property,

  • transform-origin: x-axis
  • x-axis can have any one of the following keywords left, right, top, bottom, center, or the values must be in length, percentage.

  • transform-origin: x-axis y-axis
  • x-axis and y-axis, each one can have any one of the following keywords left, right, top, bottom, center, or the values must be in length, percentage.

  • transform-origin: x-axis y-axis z-axis
  • x-axis and y-axis, each one can have any one of the following keywords left, right, top, bottom, center, or the values must be in length, percentage.

    z-axis always represent the Z offset. It must be a value, and must be in length.