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.
The default value of the transform-origin property is 50% 50%, which represents the center of the element.
The values of this property are tabulated as follows.
Let's understand this property by using some illustrations.
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
Now, in the next example, we will specify the position using the keyword values.
In this example, we are applying the transform-origin property with the keyword values.Test it Now
Now, let's apply the transform-origin property on elements with 3D transformation.
In this example, we are applying the transform-origin property on the 3D transformed elements.Test it Now