Is there a way to smoothly combine multiple CSS3 transforms over time? For example, when I first set the scale transform of an element like this:
$bgWrapper.css({
'-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});
And then a few moments later I apply a translate transform like this:
$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});
I encounter an issue where the second transform overrides the first one. This is not the desired behavior for my project. Upon further observation, I realized that I can combine these transform values by temporarily storing the old transform and then applying them together like this:
var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});
However, even this approach has some drawbacks, especially with repeated calls.
So my question is, is there a way to get the exact value of a CSS3 scale using JavaScript? Is there a method to retrieve the precise value of a CSS3 translate via JS? Currently, I am only able to obtain a matrix with these values, and while parsing it is an option, I hope there is a more efficient solution.
Lastly, I suspect that -webkit-transform: matrix(...) may not be hardware accelerated on iPad. Would using matrix3d be the best approach to seamlessly combine all these transformations without any issues?
Thank you for your help, I appreciate your understanding of my questions :)