Working with Transform3d in jQuery

Question

I am trying to make a function that increases or decreases the size of an object. I use the transform: scale. But my object already uses transform: translated3d to set the position of the same. Thus, the css is as follows:

transform: translate3d(-862px, 512px, 0px) scale(0.5, 5);

However when determining by jQuery a new scale, It replaces my entire Transform. How to upgrade my Transform to a new Scale without losing mine translated 3d?

Does anyone have any idea?

Answer 1

You can do this with Javascript, for security (to work on different browsers) use the necessary CSS prefixes:

div.style.webkitTransform = transfromString;
div.style.MozTransform = transfromString;
div.style.msTransform = transfromString;
div.style.OTransform = transfromString;
div.style.transform = transfromString;

An example could be like this:

function zoom(x, y) {
    return `scale(${x}, ${y}) translate3d(${x}px, 100px, ${x}px) `;  
}

let x = 0,
    y = 0;
const div = document.querySelector('div');

function mudarZoom() {
    x += 0.1;
    y += 0.15;
    if (y > 5) return;
    const transfromString = zoom(x, y);
    div.style.webkitTransform = transfromString;
    div.style.MozTransform = transfromString;
    div.style.msTransform = transfromString;
    div.style.OTransform = transfromString;
    div.style.transform = transfromString;
    setTimeout(mudarZoom, 200);
}

mudarZoom();

div {
    padding: 10px;
    background-color: #aaf;
    border-radius: 5px;
    width: 15px;
    height: 15px;
    text-align: center;
    transition: transform 1s;
}

<div>X</div>