The transform property permits you to visually control an element using transform functions. Such functions are skewing, rotating, translating, or scaling. A transformation effect lets you to change shape, size and position of an  element.

translate() :- The translate(x, y) function is used to relative positioning, translating, or relocating, an element by x from the left, and y from the top. It moves the elements sideways, or up and down. 

 div{
   -webkit-transform: translate(15px, -15px); 
   -moz-transform: translate(15px, -15px);
   -o-transform: translate(15px, -15px); 
   transform: translate(15px, -15px);
}

• translateX() :-  It is used to specify left/right value of an element or div.

div{
-webkit-transform: translatex(15px);
  -moz-transform: translatex(15px);
  -o-transform: translatex(15px);
  transform: translatex(15px);
}

•  translateY() :-  It is used to specified the top/bottom value of an element or div.

div {
  -webkit-transform: translatey(-15px); 
  -moz-transform: translatey(-15px); 
  -o-transform: translatey(-15px); 
  transform: translatey(-15px);
}

scale() :- The scale(w, h) property scales a component by w width and h tallness. In this if one value is declared, the scaling will be relative.

  div {
  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  transform: scale(1.5, 2);
}

• scaleX() :-  Here only width is specified. 

div{
-webkit-transform: scalex(0.5); 
  -moz-transform: scalex(0.5); 
  -o-transform: scalex(0.5); 
  transform: scalex(0.5);
}

• scaleY() :- Here only height is specied.

 div{
 -webkit-transform: scaley(2);
  -moz-transform: scaley(2);
  -o-transform: scaley(2);
  transform: scaley(2);
}

rotate() :-  This function will rotate an element about the point of origin with the angle specified.

div{
 -webkit-transform: rotate(15deg); 
  -moz-transform: rotate(15deg); 
  -o-transform: rotate(15deg); 
  transform: rotate(15deg)
}

skew() :- The skew(x,y) function specifies a skew along the x- axis and y-axis. 

div{
 -webkit-transform: skew(15deg,  4deg);
  -moz-transform: skew(15deg,  4deg);
  -o-transform: skew(15deg,  4deg);
  transform: skew(15deg,  4deg);
}

• skewX() :- Here, only x-axis value is specified.

  div{
 -webkit-transform: skewx(15deg);
  -moz-transform: skewx(15deg);
  -o-transform: skewx(15deg);
  transform: skewx(15deg);
}

• skewY() :-  Here, only y-axis value is specified.

  div{
 -webkit-transform: skewy(-6deg); 
  -moz-transform: skewy(-6deg); 
  -o-transform: skewy(-6deg); 
  transform: skewy(-6deg);
}