CSS3 animation effects

Transform:2d deformation:
With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements. Conversion method: Translate ()/rotate ()/scale ()/skew ()/matrix ()

None defines no conversion.
Translate (x, y) defines a 2D translation transformation.
TranslateX (x) defines the conversion, just with the value of the x-axis.
Translatey (y) defines the conversion, just with the value of the y-axis.

Scale (x, y) defines the 2D scaling transformation.
ScaleX (x) defines the zoom transformation by setting the value of the x-axis.
ScaleY (y) defines the zoom transformation by setting the value of the y-axis.

Rotate (angle) defines the 2D rotation, which specifies the angle in the parameter.
Supplement 1. The angle can also be used in radians units: rad

Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes.
KEWX (angle) defines a 2D tilt transition along the X-axis.
Skewy (angle) defines a 2D tilt transition along the Y-axis.

Matrix (n,n,n,n,n,n) defines a 2D conversion, using a six-value matrices.
The deformation matrix function is very powerful, but relatively complex, involving complex mathematical calculations, in this chapter is not explained in detail.

Transform-origin: Changing the base point of an element's deformation
Pixels/percent
X-axis: Left/right/center
Y-Axis: top/bottom/center/

Transform:3d deformation:
Transform:3d variants can be approximated as moving elements along the z axis, making elements closer or farther away from you, making the elements appear larger or smaller.

Transform:3d deformation function
Translate3d (x, y, z) defines 3D transformations.
Translatey (y) defines the conversion, just with the value of the y-axis.
TranslateX (x) defines the conversion, just with the value of the x-axis.
Translatez (z) defines the 3D conversion, just using the z-axis value.

Rotate3d (x,y,z,angle) defines 3D rotation.
Rotatex (angle) defines a 3D rotation along the X-axis.
Rotatey (angle) defines a 3D rotation along the Y-axis.
Rotatez (angle) defines a 3D rotation along the Z-axis.

Scale3d (x, y, z) defines a 3D scaling transformation.
Scalez (z) defines the 3D scaling transformation by setting the value of the z-axis.
ScaleX (x) defines the zoom transformation by setting the value of the x-axis.
ScaleY (y) defines the zoom transformation by setting the value of the y-axis.

Matrix3D (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) defines a 3D conversion, using a 4x4 matrix of 16 values.

Transform-origin allows you to change the position of the element being converted. The element x and y axes can be changed by the convert element. The 3D conversion element can also change its Z axis.

Perspective (N) defines a perspective view for 3D transformation elements.

Transform-style specifies how nested elements are displayed in 3D space.
The flat child element will not retain its 3D position.
The preserve-3d child element retains its 3D position.

Perspective-origin Specifies the bottom position of the 3D element. The Perspective-origin property is not supported by the browser at this time.
Backface-visibility defines whether elements are visible when not facing the screen

CSS3 animation effects