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;
}