One: Zoom
Scale: scale
Function: Make the element change in shape
Attribute: scale
Format: transform:scale(X, Y)
x: Indicates the zoom factor in the horizontal direction
y: Indicates the zoom factor in the vertical direction
Note: Zooming is only a visual effect, and will not affect other block elements (boxes). When the value is greater than 1, it means zooming in, and when it is less than 1, it means zooming out. If only one value is written, it means proportional zooming .
The effect of mouse click is enlarged by 2 times
Two: Displacement
Attribute: translate
Format: transform: translate (X-axis displacement, Y-axis displacement)
If the horizontal displacement is positive, it moves to the right, and if it is negative, it moves to the left. Vertical displacement direction is down
Only write one value, indicating the horizontal displacement. When the parameter is a percentage, it is relative to its own width and height.
The displacement is only a visual effect and will not affect other boxes.
Three: Rotate
Attribute: rotate
Format: transform:rotate(angle (unit: deg))
When the angle value is positive, it rotates clockwise, and when it is negative, it rotates counterclockwise.
Transform the rotation center point: transform——origin: horizontal coordinates, vertical coordinates
Value: px
Direction: center , left, right, top, bottom
Notice:
transform can write multiple transformations, separated by spaces
Depending on the order of writing, different results may appear
If the rotation and displacement are written together, the rotation is in front and the displacement is in the back, which means that the rotation is performed first, and then the displacement is performed in the direction after the rotation
If the displacement is in front and the rotation is in the back, it means first displacement and then rotation.
Four: Tilt
Attribute: skew
Format: transform: skew (horizontal tilt angle, vertical tilt angle (unit: deg))
Positive value: clockwise tilt Negative value: counterclockwise tilt
Two angles intersect, not greater than or equal to 90 degrees
tilt effect
Notice:
Transformation operations do not affect other elements;
Can only be added to block elements, not to inline elements;
Add multiple deformation operations at the same time, first perform the previous one, and then perform the latter one
Multiple transformation operations must be written after one transform attribute. When writing multiple transform attributes, the latter ones will overlay the previous ones.