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

概述有没有办法在不重写的情况下组合(混合)css转换属性？例如，我想旋转和缩放。 http://jsfiddle.net/hyzhak/bmyN3/ HTML <div class="item rotate-90 tiny-size"> Hello World!</div> CSS .rotate-90 { -webkit-transform: rotate(90deg);}.t 有没有办法在不重写的情况下组合(混合)CSS转换属性？例如，我想旋转和缩放。
http://jsfiddle.net/hyzhak/bmyN3/

HTML

<div >    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

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

解决方法 这是尝试使用JavaScript： http://jsfiddle.net/eGDP7/解决问题

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

<div  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供应商前缀

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

总结

以上是内存溢出为你收集整理的html – 如何混合css3转换属性而不覆盖(实时)？全部内容，希望文章能够帮你解决html – 如何混合css3转换属性而不覆盖(实时)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。