CSS 2D animations

Animation:

With the CSS3 transform conversion, we are able to move, scale, rotate, lengthen, or stretch elements.

1. Mobile: Translate (). Using the translate () function, you can move the element from its original position. Move the upper-left origin of the reference element

A) Syntax: Translate (TX) | Translate (Tx,ty)

b) TX is a vector length that represents the x-axis movement, and when its value is positive, the element moves in the right direction of the x-axis and, conversely, when the value is negative, the element moves to the left direction of the x-axis.

c) Ty is a vector length that represents the y-axis (portrait) movement, and when its value is positive, the element moves in the direction of the y-axis, whereas the value is negative, the element moves toward the y-axis direction. If Ty is not explicitly set, it is equivalent to ty=0.

D) can also use Translatex (TX) or Translatey (Ty)

e) Case Examples:

div:hover{
/* Set two values, the first parameter indicates the x direction the second parameter represents the y direction */
/*transform:translate (100px,100px); * *
/* You can also pass in only one parameter, representing the x direction */
/*transform:translate (100px); */
/* You can also specify a specific direction, as shown in the following code, which indicates that the y direction is moving in positive direction 100px*/
Transform:translatey (100px);
}

1. Zoom: Scale (): scales () functions let elements scale objects according to the center origin. The default value is 1. So any value between 0.01 and 0.99 makes an element smaller, and any value greater than or equal to 1.01 makes the element appear larger. Scaling is the reference element center point.

A) Syntax: Scale (Sx|ty) | Scale (Sx,sy)

b) SX: The scaling vector used to specify the direction of the horizontal coordinate (x axis), if the value is between 0.01~0.99, causes the object to shrink in the x-axis, and if the value is greater than or equal to 1.01, the object is magnified in the y-axis direction.

c) Sy: Used to specify the vertical coordinate (Y axis) direction of the scaling amount, if the value of 0.01~0.99, will let the object in the y-axis, if the value is greater than or equal to 1.01, the object in the y-axis to enlarge

D) can also use ScaleX (SX) or ScaleY (SY)

e) Case Examples:

div:hover{
/* Pass in two values, the first parameter indicates scaling in x direction the second parameter represents the zoom in the y direction */
/*transform:scale (2,0.5); * *
/* You can also pass in only one value, representing the same zoom in the X and y directions */
/*transform:scale (2); * *
/* You can also specify the zoom in the specific direction */
Transform:scalex (2);
}

1. Rotation: Rotate (): the rotation rotate () function assigns a 2D rotation to an element based on the origin of the object by the specified angle parameter. It operates primarily in two-dimensional space and accepts an angle value that specifies the amplitude of the rotation. If the value is positive, the element rotates clockwise from the center of the origin, and if the value is negative, the element is rotated counterclockwise from the center of the origin.

A) Syntax: Rotate (a);

b) A: Represents the angular value of a rotation. The value can be positive or negative. If the value is positive, the element is rotated clockwise by default relative to the center point of the element, and if the value is negative, the element is rotated counterclockwise from the center point of the element by default

c) Examples of cases:

div:hover{
/* angle of incoming rotation, if positive, rotate clockwise */
/*transform:rotate (90DEG); */
/* If you pass in a negative value, rotate counterclockwise */
Transform:rotate ( -270DEG);
}

1. Flip: Skew (): Allows the element to tilt the display. It tilts an object at a certain angle around the x-and Y-axes in its center position. This differs from the rotation of the rotate () function, where the rotate () function simply rotates without altering the shape of the element. The skew () function does not rotate, but only changes the shape of the element

A) Syntax: Skew (AX) | Skew (Ax,ay)

b) Ax: Used to specify the angle at which the element's horizontal direction (x-axis direction) is tilted.

c) Ay: The angle used to specify the vertical direction of the element (y-axis direction) tilt. If this value is not set explicitly, it defaults to 0.

D) can also use SKEWX (SX) or Skewy (SY)

e) Case Examples:

div:hover{
/* Tilt 30 degrees in the x direction */
Transform:skewx (30DEG);
}

1. Transform-origin: Allows you to change the position of the element being converted.

A) Example:

div{
width:100px;
height:100px;
margin:100px Auto;
background-color:red;
/* Add transitions */
Transition:all. 5s;
/* Set the center of the zoom, which defaults to the center of the element, and now changes to the upper left corner of the element */
transform-origin:0px 0px;
}
div:hover{
Transform:scale (2);
}

CSS 2D animations