Changing CSS3's translate while retaining other values?

Question

Hi,

I have an element that has -moz-transform applied to it with translateX(), translateY() and skew(). What I need to do is to alter the skew() value without touching the translations, using javascript.

How would I accomplish this?

Answer 1

Here's a general solution:

var elem = /*...*/

var transformations = getComponentsFromAttribute(elem.style['-moz-transform']);
transformations.skew = [1, 1];

elem.style['-moz-transform'] = getAttributeFromComponents(transformations));

Using these functions:

function getComponentsFromAttribute(attribute)
{
    var componentMap = {};

    var regex = /([a-z]*)\(([^)]*)\)/gi;
    var matches;

    while(matches = regex.exec(attribute))
        componentMap[matches[1]] = matches[2].split(/, */);

    return componentMap;
}

function getAttributeFromComponents(componentMap)
{
    var componentList = [];

    for(var key in componentMap)
        componentList.push(key + '(' + componentMap[key].join(',') + ')');

    return componentList.join(' ');
}