how to set !important on a multi value css transform?

Issue

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

.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

I want to override this to:

.mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}

but when I use !important like this:

transform: translateX(100%) rotateY(0deg) !important;

It breaks and will not work.

Any chance we can use !important on a multiple value transform?

Solution

To answer your question

Any chance we can use !important on a multiple value transform?

You can use !important the way you are using like in any other property

If your !important rule is not working is because of CSS specificity and/or CSS inheritance

---

Don't use !important

Instead be more specific, and use a parent selector (or even a sibling selector) to override it

something like this:

.mk-flipbox-front {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.parent .mk-flipbox-front {
  -webkit-transform: translateX(100%) rotateY(0deg);
  transform: translateX(100%) rotateY(0deg);
}

<div class="parent">
  <div class="mk-flipbox-front">test</div>
</div>

Answered By - dippas