The CSS3 2D transformations have five methods to choose from. These methods are translate(), rotate(), scale(), skew() and matrix().

CSS translate() method

The translate() method moves the element from its transform-origin along the X-axis and / or Y-axis. 

Syntax:

selector { 

    transform: translate(X, Y);

   transform: translateX(X);

   transform: translateY(Y);

}

Values:

The translate() method takes values as lengths (px, em, rem, etc…) and percentages, with the default value being 0.

Example of translate() method:

.class1  {

       display: inline-block;

       width: 50%;

       height: 50px;

       transform: translate(-3px,47px);

}

CSS rotate() method

The rotate() method rotates the element around its transform-origin in two dimensional space, with 0 being the top of the element, and positive rotation being clockwise (angles). There are also the rotateX(x), rotateY(y).

Syntax:

selector { 

    transform: rotate(angle);

   transform: rotateX(angle);

   transform: rotateY(angle);

}

Values:

The rotate() method takes angle values (deg, rad, grad, and turn), including negative values and values greater than one rotation.

Example of rotate() method:

.class1  {

       display: block;

       width: 50%;

       height: 50px;

       transform: rotate(247deg);

}

CSS scale() method

The scale() method changes the size of the element, with scale(1) being the default. 

Syntax:

selector { 

    transform: scale(X, Y);

   transform: scaleX(X);

   transform: scaleY(Y);

}

Values:

The scale() method can be written as scale(s), scale(sX, sY). Scale(1) is the default size. Smaller values make the element smaller, so scale(.5) is half size; likewise, bigger values make the element larger, so scale(2) is twice the size.

Example of scale() method:

.class1  {

       display: block;

       width: 50%;

       height: 50px;

       transform: scale(.75,1);

}

CSS skew() method

The skew() method skews the element along the X (and, if two numbers are specified, Y) axis. 

Syntax:

selector { 

    transform: skew(X-angle, Y-angle);

   transform: skewX(angle);

   transform: skewY(angle);

}

Values:

The skew() method with one value skews the element horizontally (on the X-axis), and if there’s a second value it controls vertical skew It can be written as skew(tX) and skew(tX, tY) (angles). There’s also skewX() and skewY().It takes angle units (deg, grad, rad, and turn) like rotate().

While skew() can take negative and large values, skew(90deg) makes an element vanish as its two parallel edges touch and it becomes infinitely long. Values greater than 90deg (or -90deg) appears as a mirror image up to 180deg (or -180deg), where they appear the same as 0. This means skew(10deg) will appear the same as skew(190deg).

Example of skew() method:

.class1  {

       display: inline-block;

       width: 50%;

       height: 50px;

       transform: skew(0,-20deg);

}

CSS matrix() method

The matrix() method combines other 2D transform methods into one. 

Syntax:

selector { 

    transform: matrix(n,n,n,n,n,n);

}

Values:

The matrix() method takes six parameters (as mathematical functions) in a form of matrix(a, b, c, d, e, f); which in turn allow you to rotate, scale, skew and move elements.

The 2D transformation functions can be represented using transform matrix():

  • translate(tX, tY) - matrix(1, 0, 0, 1, tX, tY), where tX and tY are the horizontal and vertical translations.
  • rotate(a) - matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0), where a is the value in deg. Swap the sin(a) and -sin(a) values to reverse the rotation. Note that the maximum rotation you can represent is 360°.
  • scale(sX, sY) - matrix(sX, 0, 0, sY, 0 ,0), where sX and sY are the horizontal and vertical scaling values.
  • skew(aX, aY) - matrix(1, tan(aY), tan(aX), 1, 0 ,0), where aX and aY are the horizontal and vertical values in deg.

Example

The 2D transforms example with methods translate(), skew(), scale(), rotate() and matrix():

 

›› go to examples ››