как смешать свойства преобразования css3 без переопределения (в режиме реального времени)?

<p>есть ли способ объединить (смешать) свойства преобразования css без переопределения? например, там я хочу повернуть и масштабировать . <a href="http://jsfiddle.net/hyzhak/bmyn3/">http://jsfiddle.net/hyzhak/bmyn3/</a> </p><h1>html</h1><pre><code><div class="item rotate-90 tiny-size"> hello world! </div> </code></pre><h1>css</h1><pre><code>.rotate-90 { -webkit-transform: rotate(90deg); } .tiny-size { -webkit-transform: scale(0.25, 0.25); } </code></pre><h1>ps</h1><p>у меня просто много элементов и много простых классов для преобразования вида элементов. и я просто хочу настроить их вид, добавив и удалив некоторые классы. объединение всех классов не работает, потому что это будут сотни комбинаций.</p><p>также я хочу сделать это в реальном времени.</p><p>количество трансформаций может быть примерно 5, и каждое из них может содержать около 10 состояний - поэтому просто опишите все их комбинации руками, чтобы получить примерно</p><pre><code>10*10*10*10*10 = 100000 cases </code></pre><p>это плохое решение.</p>

<p>хм ... насколько я знаю, вам придется создать новый класс и объединить их следующим образом (через пробел):</p><pre><code>-webkit-transform: rotate(90deg) scale(0.25, 0.25); </code></pre>

<p>вместо поворота и масштабирования вы можете использовать матричную функцию.</p><pre><code>transform: matrix(a, b, c, d, tx, ty); </code></pre><p>в приведенном примере, я полагаю, следующее даст желаемый результат:</p><pre><code>transform: matrix(0,-0.25,0.25,0,0,0); </code></pre><p>для объяснения матричных расчетов:</p><ul> <li> <a href="http://en.wikipedia.org/wiki/linear\_transformation#examples\_of\_linear\_transformation\_matrices">http://en.wikipedia.org/wiki/linear\_transformation#examples\_of\_linear\_transformation\_matrices</a> </li> </ul><p>и существуют некоторые полезные инструменты для расчета этих матриц как css, такие как:</p><ul> <li> <a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">http://www.boogdesign.com/examples/transforms/matrix-calculator.html</a> </li> </ul>

<p>одна вещь, которую вы могли бы сделать, это получить вычисленный стиль преобразования в js и объединить ваше вторичное значение преобразования:</p><p><strong>html</strong></p><pre><code><div class="rotate-scale"></div> </code></pre><p><strong>css</strong></p><pre><code>.rotate-scale { transform: rotate(90deg); } </code></pre><p><strong>js</strong></p><pre><code>var el = document.queryselector('.rotate-scale'), // rotation will get the transform value declared in css rotation = window.getcomputedstyle(el).getpropertyvalue('transform'); el.style.transform = rotation + 'scale(0.25, 0.25)'; </code></pre>