Why does giving a negative value in the CSS function "translateY()" transform the element-CodePudding

I am having CSS code to move up a div element on its y-axis whenever user hovers the mouse over the div element. This is the output currently:

Here is the video depicting it.

This is the current HTML and CSS code to do it:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div >
        <div >
            <h2>Title</h2>
            <p>This is an article and it has some content</p>
        </div>
        <div >
            <h2>Title</h2>
            <p>This is an article and it has some content</p>
        </div>
        <div >
            <h2>Title</h2>
            <p>This is an article and it has some content</p>
        </div>
        <div >
            <h2>Title</h2>
            <p>This is an article and it has some content</p>
        </div>
        <div >
            <h2>Title</h2>
            <p>This is an article and it has some content</p>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background-color: #777;
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cards {
    display: flex;
}

.card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 4px 4px 12px 12px;
}

.card:not(:first-child) {
    margin-left: -4rem;
}

.card:hover {
    transform: translateY(-1rem)
}

My question is why is it moving in the positive y-axis when I supply -1rem and vice versa.

Kindly comment if more information is required.

CodePudding user response：

TL:DR; https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY It's the normal behavior transform: translateY(): positive value translate the element towards the bottom and negative value towards the top, and it makes sense because you read a page from top to bottom.

CodePudding user response：

https://drafts.csswg.org/css-transforms-2/#transform-rendering

The Y axis is going from top to bottom and the X axis from left to right. So using translateY() with a positive value will shift the element downwards and vice versa.