This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Today combing is a more complex knowledge point in the CSS ———— CSS3 deformation, review is conducive to our implementation of CSS animation!

Css3 transform

Transform literally means transform. In CSS3, transform mainly includes the following types: rotate, skew, Scale, Translate and matrix transform.

transform: rotate | scale | skew | translate |matrix;
Copy the code

1. Rotate

  • Rotate () : Assigns a 2D rotation to the original element with the specified Angle parameter. The transform-origin attribute is defined first.

  • Transform-origin defines the base point of rotation, where Angle is the Angle of rotation. If the value is set to positive, it means clockwise rotation, and if the value is set to negative, it means counterclockwise rotation. Such as: the transform: the rotate (30 deg); .

2. Translate

We have three situations:

  • translate(x,y)Move horizontally and vertically (i.e., X-axis and Y-axis simultaneously);
  • translateX(x)Move only horizontally (X-axis move);
  • translateY(Y)Only vertical movement (Y-axis movement).

1. Translate ([,]) : specifies a 2D translation through the vector [tx, ty]. Tx is the first transition parameter and ty is the second transition parameter option. If it is not provided, then ty takes 0 as its value. Translate (x,y), which translates the object to the set value of the x,y parameters, and moves the object in the opposite direction when the value is negative. The base point defaults to the center of the element, and can also be changed according to transform-origin. As the transform: translate (100 px, 20 px);

TranslateX () : translateX() specifies a translation given a number in the X direction. If only the element is moved to the X-axis, the base point is also the center point of the element. The position of the base point can also be changed according to transform-origin. Such as: the transform: translateX (100 px);

TranslateY () : translateY() specifies a translation with a given number of Y directions. Move only to the Y axis, and the base point is at the center of the element. The position of the base point can be changed by transform-origin. Such as: the transform: translateY (20 px);

3. Scale

Scale and translate are similar in that they have three cases:

  • Scale (x,y) scales both horizontally and vertically (that is, both X-axis and Y-axis);
  • ScaleX (x) elements are only scaled horizontally (x-scaled);
  • ScaleY (y) Elements are only scaled vertically (Y-axis scaling), but they have the same scaling center point and cardinality. The center point is the central position of the element, and the scaling cardinality is 1. If the value is greater than 1, the element is enlarged; if the value is less than 1, the element is shrunk.

Let’s see how to use these three cases:

1, scale([,]) : Provides two arguments to perform the [sx,sy] scaling vector specifying a 2D scale(2D scaling).

If the second argument is not provided, the same value as the first argument is taken. Scale (X,Y) is used to scale an element. You can use transform-origin to set the base point of the element, which is also located in the center of the element. In the basis, X represents the horizontal scaling, Y represents the vertical scaling, and Y is an optional parameter. If the value of Y is not set, then X and Y are equally scaled in both directions. And let X prevail. Such as: the transform: scale (2,1.5);

ScaleX () : Performs scaling using the [sx,1] scaling vector, sx being the required parameter. The default value of scaleX is (1,1). Its base point is also at the center of the element. We also use transform-origin to change the base point of the element. Such as: the transform: scaleX (2);

ScaleY () : Use the [1,sy] scaling vector to perform the scaling operation, with sy as the required parameter. ScaleY indicates that the element is only scaled in the Y-axis (vertical direction), and its base point is also in the center of the element. Transform-origin can be used to change the base point of the element. As the transform: scaleY (2);

Four, skew

Skew has the same three conditions as translate and scale:

  • Skew (x,y) distorts elements in both horizontal and vertical directions (the X-axis and Y-axis are simultaneously distorted according to a certain Angle value);
  • SkewX (x) only distorts the elements in the horizontal direction (X-axis distortion);
  • SkewY (y) only distorts the elements in the vertical direction (Y-axis distorts).

The specific use is as follows:

1. Skew ([,]) : Transformation of skew on X-axis and Y-axis. The first argument corresponds to the X-axis, and the second argument corresponds to the Y-axis. If the second argument is not provided, the value is 0, which means there is no miter in the y-direction.

Skew is used to distort the elements. The first parameter is the horizontal distortion Angle, and the second parameter is the vertical distortion Angle.

The second argument is optional. If the second argument is not set, then the Y-axis is 0deg. Similarly, we can use transform-origin to change the base position of the element based on the center of the element. Such as: the transform: skew (30 deg, 10 deg);

SkewX () : Specifies a skew transformation along the X-axis at a given Angle. SkewX is to make the element base point at its center and twist it in the horizontal direction (X-axis). Transform-origin can also be used to change the base point of the element. Such as: the transform: skewX (30 deg);

3. SkewY () : Specifies a skew transformation along the Y-axis at a given Angle. SkewY is used to set the element to be distorted in the vertical direction (Y-axis) at a given Angle from its center. Similarly, we can use transform-origin to change the base point of an element. Such as: the transform: skewY (10 deg);

The matrix matrix

Matrix (,,,,,) : Specifying a 2D transformation in the form of a six-valued transformation matrix(a,b, C,d,e,f) is equivalent to directly applying a transformation matrix [a b C d e f]. Is to relocate the element based on the horizontal (X-axis) and vertical (Y-axis) directions. This attribute value uses a matrix involved in mathematics.