Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel