CODEWITHSUNDEEP
jquerycss
jollelj
jollelj

Reputation: 1030

Change transform-origin on already scaled element

I am trying to achieve a zoom effect which takes into consideration where on the to-be-zoomed element the user decides to scroll-in i.e. zoom.

In order to achieve this I'm trying to change the transform-origin.

This change seems to cause the element to jump back to it's original position before changing the transform-origin and then scale up the element from that point.

if (i === 0) {
    $(this).css({
        'transform': 'scale(2)',
        'transform-origin': '100% 100%'
    });
    i++;
} else {
    $(this).css({
        'transform': 'scale(2.5)',
        'transform-origin': '30% 70%'
    });
}

Here's a fiddle that shows what I'm trying to explain.

Any help would be greatly appreciated.

Upvotes: 1

Views: 800

Answers (1)

Martin Ernst
Martin Ernst

Reputation: 3269

You have set in your css: -webkit-transition: -webkit-transform 500ms linear; This is valid only for transform, but not for transform-origin, because that's a separate property. That's why the origin jumps on second click. Instead write:

-webkit-transition: -webkit-transform 500 ms linear, //note the comma-separation
                    -webkit-transform-origin 500ms linear;

Now the transform-origin is transitioned too. In a comma-separated list of properties you can define speed and easing for each property separately. If you want the same behaviour for all properties, you can simply write:

-webkit-transition: all 500ms linear;

I have updated your fiddle.

Upvotes: 2

Related Questions