如何混合css3转换属性而不覆盖(实时)？

Question

有没有办法在不重写的情况下组合(混合)css转换属性？例如,我想旋转和缩放. http://jsfiddle.net/hyzhak/bmyN3/

HTML

<div class="item rotate-90 tiny-size">
    Hello World!
</div>

CSS

.rotate-90 {
    -webkit-transform: rotate(90deg);
}
.tiny-size {
    -webkit-transform: scale(0.25, 0.25);
}

PS

我只是有很多元素和很多简单的类来转换元素的视图.我只想通过添加和删除一些类来调整它们的视图.所有类的组合不起作用,因为它将是数百种组合.

我也想实时做到这一点.

变换的数量可以是大约5,并且它们中的每一个可以容纳大约10个状态 - 因此只需用手描述它们的所有组合

10*10*10*10*10 = 100000 cases

这是一个糟糕的解决方案.

Answer 1

嗯......据我所知,你必须创建新类并以这种方式组合它们(用空格分隔):

-webkit-transform: rotate(90deg) scale(0.25, 0.25);

Answer 2

以下是使用Javascript解决问题的尝试:http://jsfiddle.net/eGDP7/

我在html上使用数据属性来列出我们想要应用的变换的类:

<div class="compoundtransform" data-transformations="scaletrans2, rotatetrans1">Test subject</div>

我遍历这些类并找出它们代表的css规则:

function getCSSRulesForClass( selector ) {
    var sheets = document.styleSheets;
    var cssRules = [];
    for (var i = 0; i<sheets.length; ++i) {
        var sheet = sheets[i];
        if( !sheet.cssRules ) { continue; }
        for (var j = 0; j < sheet.cssRules.length; ++j ) {
            var rule = sheet.cssRules[j];
            if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
                var styles = rule.style;
                for( var k = 0; k<styles.length; ++k ) {
                    var style = styles[k];
                    cssRules.push( { 
                        property: style,
                        value: styles[style]
                    } );
                }
            }
        }
    }
    return cssRules;
}

我找到任何变换并将变换应用于矩阵:

function convertTransformToMatrix( source, transformValue ) {
    var values = transformValue.split(") "); // split into array if multiple values
    var matrix = cloneObject( source );
    for ( var i = 0; i<values.length; ++i ) {
        var value = values[i];
        if( isRotate( value ) ) {
            var rotationValue = cssRotationToRadians( value );
            var cosValue = Math.cos( rotationValue );
            var sinValue = Math.sin( rotationValue );
            var a = matrix.a;
            var b = matrix.b;
            var c = matrix.c;
            var d = matrix.d;
            var tx = matrix.tx;
            var ty = matrix.ty;
            matrix.a = a*cosValue - b*sinValue;
            matrix.b = a*sinValue + b*cosValue;
            matrix.c = c*cosValue - d*sinValue;
            matrix.d = c*sinValue + d*cosValue;
            matrix.tx = tx*cosValue - ty*sinValue;
            matrix.ty = tx*sinValue + ty*cosValue;
        } else if ( isScale( value ) ) {
            var scale = cssScaleToObject( value );
            matrix.a *= scale.x;
            matrix.b *= scale.y;
            matrix.c *= scale.x;
            matrix.d *= scale.y;
            matrix.tx *= scale.x;
            matrix.ty *= scale.y;
        } else if ( isTranslate( value ) ) {
            var translate = cssTranslateToObject( value );
            matrix.tx += translate.x;
            matrix.ty += translate.y;
        }
    }
    return matrix;
}

最后,我将该矩阵作为变换应用于节点.

目前:

• 代码有点乱
• CSS解析仅限于缩放(x,y),translate(x,y),以及使用degree或radian值旋转
• 它只适用于webkit供应商前缀

如果对任何人都有用,我可以整理它并将其变成实用程序.

Answer 3

我解决这个问题的方法是在我想要的那个周围添加一个包装类.例如,我有通过javascript设置其位置的包装器,然后是受css动画影响的内部 - 两者都在transform属性上.

我知道添加DOM节点并不理想,但它绕过了脚本密集的解决方案,让浏览器像往常一样优化动画和转换.