Translate

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

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents