//CSS//

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

#Test2 {
    position: absolute;
}

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

#I2 {
    transform: perspective(700px) translate(-1000px, 0px);
    transform-origin: top left; /* added this line */
}


//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 = `scale(0.5, 0.5) translate(${-1000 + 10 * count}px,0px)` /* changed the order of scale and translate */
        img2.style.transformOrigin = `center center ${10*count}px`
    }
    console.log(10 * count == 60)
    console.log(`(${-10 * count}px)`)
}