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