The Transform-origin of transform attribute

definition

The Transform-origin property is used to set the base point of the transform transformation. By default, the base position is the center point of the element. Grammar

Transform-origin:x-axis Y-axis Z-axis

name	value	Description
X-axis	Position (left, center, right)/percent/value	X-axis base point coordinates
Y-axis	Position (top, center, bottom)/percent/value	Y-Axis Base coordinates
Z-axis	Numerical	Z-axis base coordinates

Note: When you set the base point position numerically , you must take the unit . location

Use location settings to transform the base point code as follows:

. transform-origin-position {
    transform:rotate (45deg);
    Transform-origin:left top;
}

The effect of different position information is as follows (the Mark Red circle is the transformation basis point): left-top

Left-center

Left-bottom

Center-top

Right-top

percentage

Use the percent setting to transform the base point code as follows:

. transform-origin-percent {
    animation:9s rotate infinite;
    transform-origin:25% 25%;
}

The effect is as follows:

As shown above, the red circle is the element that transforms the base point. That is, the x and Y axis values set in the code are 25%. Numerical

Use numeric settings to transform the base point code as follows:

. transform-origin-number {
    transform:rotate (45deg);
    transform-origin:100px 0;
}

Note that the value must be followed by a unit.

The effect is as follows:

The position of the red circle in the figure is the position of the x axis 100px.