CSS transform-origin propertyThis 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. SyntaxThe values of this property are tabulated as follows.
Let's understand this property by using some illustrations. ExampleIn 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. Output Now, in the next example, we will specify the position using the keyword values. ExampleIn this example, we are applying the transform-origin property with the keyword values. Output Now, let's apply the transform-origin property on elements with 3D transformation. ExampleIn this example, we are applying the transform-origin property on the 3D transformed elements. Output Next TopicCSS resize
|