html

# 2D Transformation Methods in CSS

When designing a website it is often required to position, rotate, scale, or skew HTML elements horizontally and vertically to enhance the overlook of the website. For this purpose, we can use the CSS transform property which allows us to alter the position, size, or shape of an element. In CSS, there are two types of transformations which are 2D transform and 3D transform.

In this guide, however, we are going to stick to the 2D transform and learn about the various 2D transformation methods.

## 2D Transformation Methods in CSS

There are various 2D transformation methods in CSS which are as follows.

These are explained in detail below.

## translate() Method

The CSS translate() method alters the position of an element along the x-axis (horizontally) or along the y-axis (vertically) based on the parameters assigned.

Syntax

transform: translate (tx, ty)

Or,

transform: translate (tx)

The tx, and ty refer to the x, and y axes.

Example
Suppose you want to move an image to a certain position using the translate() method then follow the example below.

HTML

<img src="dog.jpg" alt="Dog">

CSS

img {
width: 250px;
height: 100px;
transform: translate(50px, 50px);
}

Output
Without translate() method. With translate() method. The translate() method has translate the image 50px from the top and 5-px from the left side successfully.

## rotate() Method

For the purpose of rotating an element clockwise or anti-clockwise based on the degree specified, the rotate() method is used.

Syntax

transform: rotate (degrees)

The degrees parameter defines the angle from which the element should be rotated.

Example
Consider the example below to understand the working of the rotate() method.

HTML

<div>
This is a normal div container.
</div>
<div class="clockwise">
This div container is rotated 25 degrees clockwise.
</div>
<div class="anticlockwise">
This div container is rotated 25 degrees anti-clockwise.
</div>

Here we have specified three div containers to demonstrate the concept of the rotate() method.

CSS

div {
width: 250px;
height: 100px;
background-color: bisque;
border: 1px solid gray;
}
.clockwise {
transform: rotate(25deg);
}
.anticlockwise {
transform: rotate(-25deg);
}

In the above code, we are first giving some width, height, background color, and border to the div containers. Afterward, we are rotating the second div 25 degrees clockwise and the third div 25 degrees anti-clockwise. Note that to rotate anti-clockwise we are using negative values.

Output The rotate() method has been implemented and verified.

## scale() Method

In order to enhance or reduce the size of an element based on the specified width, and height the scale() method is used.

Syntax

transform: scale (sx, sy)

Or,

transform: scale (sx)

The sx, and sy represent the horizontal and vertical dimensions respectively.

Example
The example below demonstrates the working of the scale() method.

HTML

<div>The size of the div container is increased two times of its original width, and height.</div>

In the above code, we have simply created a div element.

CSS

div {
width: 200px;
height: 100px;
margin: 130px;
background-color: bisque;
border: 1px solid black;
transform: scale(2,2);
}

Using CSS properties we are assigning some width, height, and margin to the div element and lastly we are using the scale() method to increase the width and height of the element twice its original width and height.

Output The size of the div container was increased using the scale() method.

## scaleX() Method

For the purpose of altering the width of an element, the scaleX() method is used.

Syntax

transform: scaleX (sx)

The sx parameter represents the horizontal dimension of an element.

Example
Let’s say you want to decrease the width of an element then consult the example below.

CSS

div {
transform: scaleX(0.5);
}

In above code, we are using the scaleX() method to decrease the width of a div container.

Output The scaleX() method is working properly.

## scaleY() Method

For the purpose of altering the height of an element, the scaleY() method is used.

Syntax

transform: scaleY (sy)

The sy parameter defines the value of y-axis.

Example

Consider the example below.

CSS

div {
transform: scaleY(2);
}

Here we are using the scaleY() method to increase the height of the div element.

Output The height of the div element has been increased two times its original height.

## skew() Method

This method skews an element horizontally and vertically based on the degrees specified.

Syntax

transform: skew (sx, sy)

Or,

transform: skew (sx)

The sx, and sy represent the x, and y axes.

Example
Suppose you wish to skew an element along x and y axes..

HTML

<div>
This is a normal div container.
</div>
<div class="skew">
This div container is skewed 10 degrees horizontally, and 15 degrees vertically.
</div>

Here we have defined two div containers to demonstrate the working of the skew() method.

CSS

div {
width: 200px;
height: 100px;
background-color: bisque;
border: 1px solid gray;
}
.skew {
transform: skew(10deg,15deg);
}

Apart from styling the div containers we are skewing the second div container 10 degrees along X-axis and 15 degrees along Y-axis.

Output The div container has been skewed horizontally and vertically.

## skewX() Method

In order to skew a particular element horizontally based on the degrees specified the skewX() method is used.

Syntax

transform: skew (sx)

The sx parameter defines the x-axis.

Example
Suppose you want to skew an element 15 degrees horizontally.

CSS

.skew {
transform: skewX(15deg);
}

Using the skewX() method we are skewing the div element 15 degrees horizontally.

Output The scaleX() method is working properly.

## skewY() Method

In order to skew a particular element vertically based on the degrees specified the skewY() method is used.

Syntax

transform: skew (sy)

The sy parameter defines the y-axis.

Example
Suppose you want to skew an element 15 degrees vertically.

CSS

.skew {
transform: skewY(15deg);
}

Using the skewX() method we are skewing the div element 15 degrees vertically.

Output The scaleY() method is working properly.

## matrix() Method

For the purpose of translating, rotating, scaling, and skewing elements all at once, the matrix() method is used.

Syntax

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translate())

You can assign values to all the properties separating them commas.

Example

Let’s understand the working of the matrix() method using the following example.

HTML

<div>
This is a normal div container.
</div>
<div class="matrix1">
The div container after using the matrix() method.
</div>
<div class="matrix2">
The div container after using the matrix() method.
</div>

To demonstrate the working of the matrix() method we have created three div elements.

CSS

div {
width: 200px;
height: 100px;
background-color: bisque;
border: 1px solid gray;
}
.matrix1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.matrix2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}

We are assigning different values to various parameters of the matrix() method.

Output The matrix method is working properly.

## Conclusion

For the purpose of positioning, rotating, scaling, or skewing elements along the X and Y axis there are various 2D transformation methods available in CSS. The basic 2D transformation methods in CSS are translate(), rotate(), scale(), skew(), and matrix(). Each of these methods serve a different purpose which we have explained in this article along with relevant example. 