how to set !important on a multi value css transform?
<p>I want to undo older css <code>transform</code> applied to an element and set new rule. 
In css we regularly use <code>!important</code> in such cases to override the higher priority rule, but it looks like <code>!important</code> is not taking effect on a transform property:</p>

<pre class="lang-css prettyprint-override"><code>.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
</code></pre>

<p>I want to override this to:</p>

<pre class="lang-css prettyprint-override"><code>.mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}
</code></pre>

<p>but when I use <code>!important</code> like this: </p>

 <pre class="lang-css prettyprint-override"><code>transform: translateX(100%) rotateY(0deg) !important;
</code></pre>

<p>It breaks and will not work. </p>

<p>Any chance we can use <code>!important</code> on a multiple value <code>transform</code>?</p>