Essential Books

Translate

suggest change

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.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

2D transforms:
* 2D Transforms
* Rotate
* Scale
* Skew
* Multiple transforms
* Translate
* Transform Origin
Table Of Contents