How to mix css3 transform properties without overriding (in realtime)?

Question

Is there any way to combine (mix) css transform properties without overriding? For example there I want to rotate and scale. http://jsfiddle.net/hyzhak/bmyN3/

html<

Answer 1

Here's an attempt at solving the problem with Javascript: http://jsfiddle.net/eGDP7/

I'm using a data attribute on the html to list the classes with transforms that we want to apply:

Test subject

I iterate through the classes and find out what css rules they represent:

function getCSSRulesForClass( selector ) {
    var sheets = document.styleSheets;
    var cssRules = [];
    for (var i = 0; i

I find any transforms and apply the transforms to a matrix:

function convertTransformToMatrix( source, transformValue ) {
    var values = transformValue.split(") "); // split into array if multiple values
    var matrix = cloneObject( source );
    for ( var i = 0; i

And I, finally, apply that matrix to the node as a transform.

Currently:

• The code is a bit messy
• The CSS parsing is limited to scale(x,y), translate(x,y), and rotate with degree or radian values
• And it would only work with the webkit vendor prefix

I might tidy it up and turn it into a utility if useful to anyone.