Working with Transform3d in jQuery

Question

Working with Transform3d in jQuery

Navigation

#1 by (0 votes)

1

I'm trying to do a function that increases or decreases the size of an object. For this I use transform: scale . But my object already uses transform: translated3d to set the position of it. In this way, the css looks like this:

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

But when I determine by jQuery a new scale , it replaces my entire transform. How to update my transform to a new scale without losing my translated 3d ?

Does anyone have any ideas?

jquery html5 css3

asked by anonymous 28.11.2016 / 17:47

1 answer

Unit test for filter application [closed] Problem with Enctype in form

score 0 · Answer 1

You can do this with JavaScript, for security (to work in 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 might look 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>