CSS Transform

Used before category names. CSS

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);  
}