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.
There are three ways to use the CSS transform-origin property,
- transform-origin: x-axis
- transform-origin: x-axis y-axis
- transform-origin: x-axis y-axis z-axis
x-axis can have any one of the following keywords left, right, top, bottom, center, or the values must be in length, percentage.
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.
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.