The meaning of transform is: to change, to deform; to convert
Reasonable use of transform in typesetting will make our typesetting look taller.
Next, I will introduce to you what attributes and effects this magical little thing has.
1. Rotate
rotate: Specify an effect on the original element through the specified angle parameter.
If the set value is positive, it means clockwise rotation, if the set value is negative, it means counterclockwise rotation. Such as: transform:rotate(30deg);
2. Mobile translate
translate() moves from the current element position according to the parameters given for the left (X-axis) and top (Y-axis) positions.
Such as: transform:translate(100px,20px):
translateX specifies a translation
by giving a number in the X direction . Only move the element to the x-axis, and its base point is the center point of the element. You can also change the base point position according to transform-origin transform:translateX(100px):
translateY specifies a translation
by the given number of Y directions . Only move to the Y axis, the base point is at the center point of the element, and the position of the base point can be changed through transform-origin. transform:translateY(20px):
3. Zoom scale
Scaling scale and moving translate are somewhat similar, and there are three situations: Let’s take a look at the specific usage methods of these three situations:
Note: The default value is 1, and its value is larger than 1 when zoomed in, and smaller than 1 when zoomed out.
1. scale(x,y) defines a 2D scaling transformation to change the width and height of an element.
Such as: transform:scale(2,1.5);
2. scaleX( n ) defines a 2D scaling transformation to change the width of the element.
For example: transform:scaleX(2):
3. scaleY( n ) defines a 2D scaling transformation to change the height of the element.
如：transform:scaleY(2):
4. Distortion skew
1. skew( x-angle , y-angle ) defines a 2D skew transformation, along the X and Y axes.
如：transform:skew(30deg,10deg);
image
2. skewX( angle ) defines a 2D skew transformation, along the X axis.
如：transform:skewX(30deg);
3. skewY( angle ) defines a 2D skew transformation, along the Y axis.
Such as: transform: skewY(10deg);
matrix(, , , , , ) : Specify a 2D transformation in the form of a six-valued (a,b,c,d,e,f) transformation matrix , which is equivalent to directly applying an [abcdef] transformation matrix. It is to reposition elements based on the horizontal direction (X axis) and vertical direction (Y axis). This property value uses a matrix related to mathematics.
Change element base point tranform-origin
Change the element base point transform-origin
We mentioned transform-origin many times before. Its main function is to allow us to change the base point position of the element before performing the transform action, because the default base point of our element is its center position. In other words, we did not use transform- When the origin changes the position of the base point of the element, the operations such as rotate, translate, scale, skew, and matrix performed by the transform are all changed based on the center position of the element itself. But sometimes we need to perform these operations on elements in different positions, then we can use transform-origin to change the base point position of the element, so that the base point of the element is not in the center position, so as to achieve the base point position you need. Let's take a look at its usage rules:
transform-origin(X,Y): Used to set the base point (reference point) of the element's motion. The default point is the center point of the element. The values of X and Y can be percentage values, em, px, and X can also be character parameter values left, center, right; Y and X can also set character values top, center, and bottom in addition to percentage values. This looks a bit like our background-position setting; I will list their corresponding writing below:
1. top left | left top is equivalent to 0 0 | 0% 0%
2. top | top center | center top is equivalent to 50% 0
3. right top | top right is equivalent to 100% 0
4. left | left center | center left is equivalent to 0 50% | 0% 50%
5. center | center center is equivalent to 50% 50% (default value)
6. Right | right center | center right is equivalent to 100% 50%
7. bottom left | left bottom is equivalent to 0 100% | 0% 100%
8. bottom | bottom center | center bottom is equivalent to 50% 100%
9. bottom right | right bottom is equivalent to 100% 100%
Among them, left, center right are values in the horizontal direction, and the corresponding percentage values are left=0%;center=50%;right=100% and top center bottom is the value in the vertical direction, where top=0%;center= 50%;bottom=100%; If only one value is taken, it means that the value in the vertical direction remains unchanged. Let's take a look at the following examples
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)