CSS 2D Transforms

CSS 2D Transforms are a set of CSS properties that enable you to manipulate the appearance and position of HTML elements in two-dimensional space. These transforms allow you to translate, rotate, scale, and skew elements, creating various visual effects and animations.

translate():

Moves an element along the X and Y axes.

Example

div{
transform: translate(25px, 50px);  
}

You can click on above box to edit the code and run again.

Output

This div element is moved 50 pixels
to the right, and 100 pixels
down from its current position.

rotate()

Rotates an element by a specified angle.

Example

  div{
  transform: rotate(25deg);
  }

You can click on above box to edit the code and run again.

Output

This a normal div element.

This div element is rotated clockwise 20 degrees.

scale()

Scales an element by a specified factor.

Example

   div{
   transform: scale(1.5);
   }

You can click on above box to edit the code and run again.

Output

skew()

Skews an element along the X and Y axes.

Example

 div{
 transform: skew(10deg, 20deg);
 }

You can click on above box to edit the code and run again.

Output

-->

This a normal div element.

This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.

matrix()

Allows for a 2D transformation using a transformation matrix.

Example

  div{
  matrix(1, 0.5, -0.5, 1, 0, 0);
  }

You can click on above box to edit the code and run again.

Output

This a normal div element.

Using the matrix() method.

Another use of the matrix() method.

By combining these transform functions, you can achieve various effects such as rotating, scaling, and moving elements on the web page. Additionally, transitions and animations can be applied to these transforms to create visually dynamic effects.

Here's a simple example demonstrating the use of some of these transform functions:

Example

    #box {
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: rotate(45deg) scale(1.5);
    }

You can click on above box to edit the code and run again.