Search code examples
csscss-transforms

Y-axis working opposite way for translate()

Have a look at the below image, actually Y+ axis is towards the top of a chart and Y- axis is towards the bottom a chart. That is, a point represented by a positive Y value should be on the top of the chart whereas a point represented by a negative Y value should be on the bottom.

enter image description here

But when I used transform: translate(50px,100px) in my code then it's showing up like the blow image. As you can see the element is getting pushed towards the bottom of page even though the translate Y value is positive.

enter image description here

Instead it need to be like in the below image (refer the "Right format" box), that is, it should be pushed towards the top. (Please excuse the typo in the image)

enter image description here

Please see the image carefully.

My code: 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore consequatur amet nemo numquam, a perspiciatis maxime necessitatibus laudantium adipisci tempore,
</div>

</body>
</html>
Solution

  • Below is the extract from W3C Spec 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.

    enter image description here

    As you can see it uses a coordinate system where the Y-axis increases vertically downwards and so when you translate by a positive value, the element moves down (instead of going up) and vice-versa.