I was working on a photo gallery project recently that needed to use these transform properties for overlay and translateY really confused me.

Just like what we learnt in Maths, translateX makes sense: A positive value moves an element to the right; whereas a negative values moves it to the left.

Source: Wikemedia

So naturally, one would think that translateY be the same as y-coordinate, right? Where a positive value would move an element upwards and vice versa.

Illustration by Olha Khomich from Icons8

It turns out that for translateY, it works the opposite way around. Thankfully, someone on StackOverflow kindly pointed out the reason.

Based on W3C's documentation for Transform Rendering Model:

The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards. Three-dimensional transform functions extend this coordinate space into three dimensions, adding a Z axis perpendicular to the plane of the screen, that increases towards the viewer.

In other words, a positive value for translateY would actually move an element downwards and vice versa. This is because the coordinate system used by W3C is different from what we know from school.