CODEWITHSUNDEEP
jqueryhtmlcss
Ashok kumar
Ashok kumar

Reputation: 542

How to apply multiple css transform properties using Jquery

I tried to apply some dynamic scale and translate css properties some thing like this 

var scale="scale(2,2)";
var translate="translate(20,20)";
var prop=scale+" "+translate;
$(this).css({
            "transform":prop
             });

But this is not working. I even tried some thing like this

 prop="'"+scale+" "+translate+"'";
$(this).css({"transform":prop});

Even this not working.Please help to resolve this.

Upvotes: 1

Views: 1301

Answers (2)

Eddie
Eddie

Reputation: 1536

I wanted to add another way using css matrix and manipulating it with jquery. Powerful way to adjust images. In the following example, we setup variables to hold the data and move an image left by 1 pixel.

var prior = parseInt($(this).css('transform').split(',')[4]) || 0;
lastX -= 1;
args = [lastScale, 0, 0, lastScale, lastX, lastY]
$(this).css('transform', 'matrix(' + args.join(",") + ')');

Upvotes: 0

Frits
Frits

Reputation: 7614

As mentioned by Harry, you have to have measurement units on your translate property.

See below:

var scale="scale(2,2)";
var translate="translate(20px,20px)";
var prop=scale+" "+translate;
$(this).css({
   "transform":prop
});

A slightly easier alternative is to do a class change instead, and assign your transform styling to the new class.

Like this:

$(this).addClass('transform-me');

And the CSS

.transform-me {
  transform:translate(20px, 20px) scale(2,2);
}

Doing it this way achieves the exact same results, but it does simplify troubleshooting where the error is occurring (whether it is the CSS or the jQuery causing problems).

Upvotes: 2

Related Questions