CSS 2D Transforms

2D Transforms

CSS 2D Transforms are a powerful tool for creating dynamic and visually appealing web pages. CSS 2D Transforms allow developers to manipulate the position, rotation, scale, and skew of any HTML element. This is done by applying a set of CSS transform properties to the element.

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

  • 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 that 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 is used to define skew transforms along with the x-axis
img{
   transform: skewX(30deg); 
}
  • skewY: skewY is used to define skew transforms along with the 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);
}