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.
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).
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(",") + ')');
translatetransform. It won't work without it. Otherwise, nothing wrong with your code.