How can I simultaneously apply multiple rotate transforms by toggling classes? - css

Question

I'm trying to apply various transforms to a given element or set of elements by clicking buttons to toggle classes on and off. This works for most things, but not when I try to toggle on more than one rotate transform. Once an element has two separate rotate transform classes (rotateX, rotateZ), the transforms stop working as I expect.
Please see my example here: http://jsfiddle.net/XTVd7/9/
CSS
#box {
width: 100px;
height: 100px;
border: 1px solid blue;
transition: all 1s;
}
.flip {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}
.spin {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
}
jQuery
$("#flipBtn").on("click", function() {
$("#box").toggleClass("flip");
});
$("#spinBtn").on("click", function() {
$("#box").toggleClass("spin");
});
I'd expect that I could flip or spin the box at any time by toggling either class on or off. This is not the case once both classes have been added to it.

Answer 1

If you want to toggle multiple values for the same property, you have to manually construct the property text (fiddle):
function createToggleFunction(element$) {
var transforms = {
flip: 'rotateX(120deg)',
spin: 'rotateZ(180deg)',
};
var state = {};
return function(transform) {
state[transform] ^= true;
var text = "";
for(var key in transforms) {
if(state[key]) text += transforms[key] + ' ';
}
element$.css('transform', text);
};
}
var toggle = createToggleFunction($('#box'));
$("#flipBtn").on("click", function() {
toggle('flip');
});
$("#spinBtn").on("click", function() {
toggle('spin');
});
A simpler solution would be to have two nested elements to represent the "box", with one of the transformations applying to the outer one and one applying to the inner one:
(See this edited version of jblasco's fiddle)
#spinner {
width: 100px;
height: 100px;
transition: all 1s;
}
#flipper {
width: 100%;
height: 100%;
transition: all 1s;
border: 1px solid blue;
}
HTML:
<div id="spinner">
<div id="flipper">
a
</div>
</div>
JQuery:
$("#flipBtn").on("click", function() {
$("#flipper").toggleClass("flip");
});
$("#spinBtn").on("click", function() {
$("#spinner").toggleClass("spin");
});