Transform

The transform CSS property lets you rotate, scale, skew or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Different values ​​of transform:

transform: matrix() rotate() scale() skew() translate() ;

all of this values has 3d and x ,y ,z  type(scaleX(),…).

Matrix(n,n,n,n,n,n):

The CSS matrix() function can be used with CSS transforms to style elements in a two-dimensional space.

#transforming {
    background-color : blueviolet;
    transform : matrix(0.3,0.5,-0.5,0.866,0,0);
}  

Rotate(angle):

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

#rotateddiv {
   transform: rotate(45deg);  
}

Scale(x,y)

he scale() CSS function defines a transformation that resizes an element on the 2D plane.

#scaleddiv {
    transform:scale(2,3);  
}

Translate(x,y):

The translate() CSS function repositions an element in the horizontal and/or vertical directions.

#translateddiv {
    transform:translate(150px,150px);  
}

Skew(x-angle,y-angle):

The skew() element performs a shear transformation which displaces each point of an element by a given angle in each direction.

#skewed {
   transform:skew(40deg,40deg);  
}