CSS 2D Transforms

The CSS 2d transforms are the process of transforming an HTML element.Basically, it changes the shape or appearance of an HTML element. It is of two types.

1.0 2D Transformation
2.0 3D Transformation

CSS3 2D Transformation

It is used to transform the HTML element in two dimension directions such as x-axis or y-axis. It has following important methods.

translate()
scale()
skewX()
skewY()
rotate()
matrix()

Translate() method

The translate() method is used to transform an HTML element in the X or Y axis.

General Syntax

      transform: translate(x-axis -length y-axis-length);

Try it now

Source Code

          .box:hover{
transform:translate(100px,100px);
}

Try it now

The translateX() Function

The translateX() function is used to to move an element along the X-axis only.

General Syntax

      transform: translateX(x-Axis length);

Try it now

Source Code

          .box:hover{
  transform:translateX(220px);
 }

Try it now

The translateY() Function

The translateY() function is used to move an element along Y-axis only.

General Syntax

      transform: translateY(y-axis -length);

Try it now

Source Code

          .box:hover{
 transform:translateY(220px);
 }

Try it now

The scale() Method

The transform scale() method is used to scale the HTML element along the X-axis, Y-axis, or both the axis. The scale contains one or two properties inside the parenthesis.

If the scale() method contains single properties then it scales the HTML element on both the X and Y axis. If the scale() method contains two properties then the first value is used to transform the HTML element in X-axis and the second value transforms the HTML element in Y-axis.

General Syntax

      scale(x);
scale(x,y);
scaleX(x);
scaleY(y);

Try it now

Source Code

          .box1:hover{ transform:scale(2);}
.box2:hover{ transform:scale(2,2);}

Try it now

The SkewX() Function

The skewX() function is used to skews an HTML element along the X-axis by the specified angle.

General Syntax

      transform:skewX(ndeg);

Try it now

Source Code

          .box1:hover{
 transform:skewX(45deg);
}

Try it now

The SkewY() Function

The skewY() function is used to skew an HTML element along the Y-axis by the specified angle.

General Syntax

      transform:skewY(ndeg);

Try it now

Source Code

          .box1:hover{ transform:skewY(45deg);}
.box2:hover{ transform:skewY(-30deg);}

Try it now

Transform Skew() Function

Transform skew() function is used to skew the HTML element on the X-axis and Y-axis by the given angles.

General Syntax

      transform:skew(skewX(mdeg),skewY(ndeg));

Try it now

Source Code

          img {
-webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
-moz-transform: skew(-40deg, 15deg);  /* Firefox */
-ms-transform: skew(-40deg, 15deg);  /* IE 9 */
transform: skew(-40deg, 15deg);  /* Modern Browsers */    
}

Try it now

The rotate() Function

The rotate() function is used to rotate the HTML element along X-axis,Y-axis or Z-axis around its origin by the given angles. The origin of the rotating element can be defined using the transform-origin property.

Please keep in mind that the default transform-origin is the center center.

Followings are the transform origin property:

transform:rotateZ()
transform:rotateX()
transform:rotateY()

Source Code

          img {
-webkit-transform: rotate(50deg);  /* Chrome, Safari, Opera */
-moz-transform: rotate(50deg);  /* Firefox */
-ms-transform: rotate(50deg);  /* IE 9 */
transform: rotate(50deg);  /* Standard syntax */    
}

Try it now

Code Explanation

The function rotate(50deg) rotates the image in the clockwise direction about its origin by the angle of 50 degrees. You can use negative values to rotate the element counter-clockwise.

Rotating Around Z-axis

Let us rotate HTML element along z-axis by 180deg.

General Syntax

      transform:rotateZ(ndeg);

Try it now

Source Code

          .btn:hover{ 
 transform:rotateZ(180deg);
}

Try it now

Rotating Around X-axis

Let us rotate HTML element around X-axis by 70deg.

General Syntax

      transform:rotateX(ndeg);

Try it now

Source Code

          .btn:hover{
      transform:rotateX(70deg);
 }

Try it now

Rotating Around Y-axis

Let us rotate, the HTML element around Y-axis by 180deg.

General Syntax

      transform:rotateY(ndeg);

Try it now

Source Code

          .btn:hover{
 transform:rotateY(180deg);
 }

Try it now

The matrix() Function

The matrix() function is a combination of scaleX(), skewY(), skewX(), scaleY(), translateX() & translateY(). It takes six parameters in the form of a matrix which can be written as matrix(a, b, c, d, e, f).

General Syntax

       
   transform:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

so, in simple terms, the syntax is like –

    
   transform:matrix(a,b,c,d,e,f);

Here, a & d help in scaling up or down the elements. It is like scale(a,d).

Similarly, b,c skew the element in the X, and Y axis respectively. It is like skew(b,c).

While, e, f help to translate the element(move the element) from one position to another. It is like translate(e,f).

Source Code

          img {
-webkit-transform:matrix(0.51, 0.5, 0, 0.9, 120, 0); /* Chrome, Safari, Opera */
-moz-transform:matrix(0.51, 0.5, 0, 0.9, 120, 0);  /* Firefox */
-ms-transform:matrix(0.51, 0.5, 0, 0.9, 120, 0); /* IE 9 */
transform:matrix(0.51, 0.5, 0, 0.9, 120, 0);  /* Standard syntax */
}

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4