在保留其他值的同时更改CSS3的翻译？

Question

我有一个-moz-transform，translateX()和translateY()已应用skew()的元素。我需要做的是使用javascript更改skew()值而不触及翻译。

我将如何做到这一点？

Answer 1

以下是一般解决方案：

var elem = /*...*/

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

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

使用这些功能：

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(' ');
}