Wie wird eingestellt, wichtig bei einer Multi-Wert-CSS-Transformation?

Question

Ich möchte ältere CSS transform rückgängig machen, die auf ein Element angewendet werden, und neue Regel festlegen. In css wir !important regelmäßig in solchen Fällen verwenden die höhere Priorität Regel außer Kraft zu setzen, aber es sieht aus wie !important auf einer transform-Eigenschaft nicht wirksam unter:

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

Ich möchte dies außer Kraft setzen zu:

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

aber wenn ich !important wie folgt verwenden:

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

Es bricht und wird nicht funktionieren.

Jede Chance, die wir verwenden können !important auf einen mehrfachen Wert transform?

Answer 1

Verwenden Sie keine !important

Statt spezifischer sein, und ein Elternteil Selektor (oder sogar ein Geschwister-Selektor) es so

etwas außer Kraft zu setzen:

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

Wenn Ihre !important Regel funktioniert nicht, weil CSS specificity und/oder CSS inheritance