Horizontal flip not working after vertical flip - css-transforms

Question

I am using the two classes two flip vertically and horizontally. Whichever one I do first works fine. However, If for example I flip vertically it works fine, but if I then try to flip horizontally it doesn't flip. Any ideas why this is?
.flippedhorizontal {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flippedvertical {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}

Answer 1

Check your dev toolbar to see which one of the declarations is used, the others will be shown crossed out. By adding the second class, you are asking it to either keep or replace the current declaration. In this case, the default behavior seems to be keeping the original value.
I have omitted prefixes for brevity, here is what I think you want:
// START WITH HORIZONTAL
transform: scaleX(-1);
// ADD VERTICAL
transform: scaleX(-1) scaleY(-1);
and the reverse:
// START WITH VERTICAL
transform: scaleY(-1);
// ADD HORIZONTAL
transform: scaleY(-1) scaleX(-1);
// putting X first ^here would be same in this case... *I think...
But to make it easy, lets put in the implicit transforms:
// START WITH IDENTITY TRANSFORM
transform: scaleX(1) scaleY(1)
// ADD HORIZONTAL
transform: scaleX(-1) scaleY(1);
// ADD VERTICAL
transform: scaleX(-1) scaleY(-1);
To solve this, you will need to control the transform itself, rather than the classes. This is relatively simple:
var el, scaleX, scaleY;
function setTransform (element, scaleXArg, scaleYArg) {
var scaleString = ("scaleX(" + scaleXArg + ") scaleY(" + scaleYArg + ")");
// now attach that variable to each prefixed style
element.style.webkitTransform = scaleString;
element.style.MozTransform = scaleString;
element.style.msTransform = scaleString;
element.style.OTransform = scaleString;
element.style.transform = scaleString;
}
el = document.getElementById("elementYouWantToUse");
scaleX = "1";
scaleY = "1";
// call setTransform to initialize
setTransform(el, scaleX, scaleY);
// to finish you can choose to call setTransform with new arguments:
setTransform(el, -1, 1);
setTransform(el, 1, -1);
setTransform(el, -1, -1);
setTransform(el, 1, 1);
The caveat is if you use the scaleX and scaleY variables, you can get away with only testing and changing one value in your event handler, rather than both as required when calling directly with values. Here is the logic for the simple test (replace scaleX with scaleY as needed):
if ( scaleX === "1" ) {
scaleX = "-1";
setTransform(el, scaleX, scaleY);
} else {
scaleX = "1";
setTransform(el, scaleX, scaleY);
}

Answer 2

An element can not have 2 different values for the same property. This is already in Thisiate answer, and it is absolutely correct.
In your case, transform can not have at the same time a scaleX and a scaleY, even if they come from 2 different classes.
The easiest way to solve your case is to create a new style for the combined classes (when the element has at the same time the 2 classes)
function flipX() {
$('#test').toggleClass("flipX");
}
function flipY() {
$('#test').toggleClass("flipY");
}
#test {
border: solid 1px blue;
font-size: 80px;
display: inline-block;
transition: all 1s;
}
.flipX {
transform: scaleX(-1);
}
.flipY {
transform: scaleY(-1);
}
.flipX.flipY {
transform: scale(-1, -1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" onclick="flipX()">flip X</input>
<input type="checkbox" onclick="flipY()">flip Y</input>
<div id="test">TEST</div>