Untitled

//HTML//
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./test.css">
    <title>Document</title>
</head>

<body>
    <div id="Test">
        <img id="I1" src="./test.png">
        <div id="Test2">
            <img id="I2" src="./test.png">
        </div>

    </div>

</body>
<script type="text/javascript" src="./animation.js"></script>

</html>

//CSS//
#Test {
    display: grid;
    place-items: center;
}

#Test2 {
    position: absolute;
}

#I1 {
    transform: perspective(700px);
}

#I2 {
    transform: perspective(700px) translate(-1000px, 0px);
}


//JS//
document.addEventListener("keydown", keydown_ievent);
var count = 0;

function keydown_ievent(e) {
    console.log(count);
    switch (e.key) {
        case 'ArrowDown':
            count++
            animate(count);
            break;
    }
}

function animate(count) {
    var img = document.getElementById("I1");
    console.log("Hi")
    img.style.transformOrigin = `center center ${10 * count}px`
    if (10 * count >= 60) {

        var img2 = document.getElementById("I2");
        img2.style.transform = `translate(${-1000 + 10 * count}px,0px)`
        img2.style.transformOrigin = `center center ${10*count}px`
    }
    console.log(10 * count == 60)
    console.log(`(${-10 * count}px)`)
}