2D Transforms

With CSS transforms you can  move, rotate, scale, and skew or translate an elements.

  • Translate: The translate() CSS function repositions an element in the horizontal and/or vertical directions.
translateddiv {
   transform:translate(150px,150px);  
}
  • Rotate: 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: This scale() CSS function defines a transformation that resizes an element on the 2D plane.
.scaleddiv {
   transform:scale(2,3);  
}
  • scaleX: scaleX is used to change the width of the element.
img{
   transform: scaleX(2);  
}
  • scaleY: scaleY is used to change the height of the element.
img{
   transform: scaleY(2);  
}
  • skew: The skew() element performs a shear transformation which displaces each point of an element by a given angle in each direction.

Skew(x-angle,y-angle):

skewed {
   transform:skew(40deg,40deg);  
}
  • skewX: skewX used to defines skew transforms along with x axis
img{
   transform: skewX(30deg); 
}
  • skewY: skewY used to defines skew transforms along with y axis
img{
   transform: skewY(60deg);  
}
  • matrix: 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);
}