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.

The default value of the transform-origin property is 50% 50%, which represents the center of the element.

Syntax

The values of this property are tabulated as follows.

Values Description
x-axis It represents the horizontal position. This value specifies the position of the view at x-axis. Its possible values are length, percentage, left, right, and center.
y-axis It represents the vertical position. This value specifies the position of the view at y-axis. Its possible values are length, percentage, top, bottom, and center.
z-axis This value is used with the 3D transformations. This value specifies the position of the view at z-axis. It can be defined using the length values. It does not allow the percentage values.
initial It sets the property to its default value.
inherit It inherits the property from its parent element.

Let's understand this property by using some illustrations.

Example

In this example, we are applying the transform-origin property with the length and percentage values. There is a rotation of 45deg in both of the elements. Here, there is the 2D transformation of elements.

Test it Now

Output

CSS transform-origin property

Now, in the next example, we will specify the position using the keyword values.

Example

In this example, we are applying the transform-origin property with the keyword values.

Test it Now

Output

CSS transform-origin property

Now, let's apply the transform-origin property on elements with 3D transformation.

Example

In this example, we are applying the transform-origin property on the 3D transformed elements.

Test it Now

Output

CSS transform-origin property
Next TopicCSS resize




Contact US

Email:[email protected]

CSS transform-origin
10/30