Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Currently there is no way to do this, it only accepts one command for <code>transform</code> at a time and cannot add or subtract like you'd like. Thus you'll have to add or remove a class depending on what the first and second type is and write a custom <code>transform</code> for that element</p> <p>Using a CSS preprocessor language like SASS or LESS could make combining transitions easier, the following allows for any number of <code>transition</code>s to be combined into one, but requires being told which ones to add (this is SCSS)</p> <pre><code>.item { width:500px; height:500px; font-size:150px; background:blue; } $firstTransform: rotate(90deg); $secondTransform: scale(0.25, 0.25); @mixin transform($transform...) { -webkit-transform: $transform; -moz-transform: $transform; -ms-transform: $transform; -o-transform: $transform; transform: $transform; } .rotate-90 { @include transform($firstTransform); } .tiny-size { @include transform($secondTransform); } .both { @include transform($firstTransform $secondTransform); } </code></pre> <p><a href="http://codepen.io/anon/pen/tukcq" rel="nofollow noreferrer"><strong>Demo</strong></a></p> <p>Really the only way to do it currently would be to use javascript, essentially adding a class with a transform, saving a variable of that class' transforms, removing the class and doing the same with another class, then combine the two matrices of the class' transforms. <strong>EDIT:</strong> See <a href="https://stackoverflow.com/questions/20167239/how-to-mix-css3-transform-properties-without-overriding-in-realtime/20200863#20200863">brejep's javascript answer</a> for more on this approach</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload