CSS3 2D Transform

CSS3 2D transform are used to re-change the element structure as translate, rotate, scale, and skew. A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements. However, the transformed element still takes space in the layout at its default (un-transformed) location.

CSS3 2D Transform-functions

1	matrix(n,n,n,n,n,n) This function is used to defines matrix transforms with six values
2	translate(x,y) This function is used to transforms the element along with x-axis and y-axis
3	translateX(n) This function is used to transforms the element along with x-axis
4	translateY(n) This function is used to transforms the element along with y-axis
5	scale(x,y) This function is used to change the width and height of element
6	scaleX(n) This function is used to change the width of element
7	scaleY(n) This function is used to change the height of element
8	rotate(angle) This function is used to rotate the element based on an angle
9	skewX(angle) This function is used to defines skew transforms along with x axis
10	skewY(angle) This function is used to defines skew transforms along with y axis

translate() Function

This function is used to move the element from its current position to a new position along the X and Y axes

div {
  width: 350px;
  height: 150px;
  background-color:red;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); 
  transform: translate(50px,100px);

rotate() Function

This function is used to rotate the element around its origin (as specified by the transform-origin property) by the specified angle.

div#myDiv {
  -ms-transform: rotate(30deg); /* IE 9 */
  transform: rotate(30deg); /* Standard syntax */
}

scale() Function

This function is used to increases or decreases the size of the element. It can be written as scale(sx, sy).

div {
  margin: 200px;
  width: 300px;
  height: 200px;
  background-color: violet;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* Standard syntax */
}

skew() Function

This function is used to skews the element along the X and Y axes by the specified angles. It can be written as skew(ax, ay).

div#myDiv {
  -ms-transform: skew(30deg,10deg); /* IE 9 */
  transform: skew(30deg,10deg); /* Standard syntax */
}