# Transform the element along with x-axis and y-axis with CSS

Use the translate(x,y) method to transform the element along with x-axis and y-axis.

Let us see the syntax

translate(x,y)

Here, x is a length representing the x-coordinate of the translating vector.

y is a length representing the ordinate of the translating vector

Let us see an example

div {
width: 50px;
height: 50px;
background-color: orange;
}
.trans {
transform: translate(20px);
background-color: black;
}