CSS 2D Transforms Translate
Example
HTML
<div class="translate"></div>
CSS
.translate {
width: 100px;
height: 100px;
background: teal;
transform: translate(200px, 50%);
}
This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.
You can also specify translations on a single axis.
On the X axis:
.translate {
transform: translateX(200px);
}
On the Y axis:
.translate {
transform: translateY(50%);
}
