Я пытаюсь применить различные преобразования к данному элементу или набору элементов, нажимая кнопки для включения и выключения классов. Это работает для большинства вещей, но не тогда, когда я пытаюсь переключить более одного поворотного преобразования. Когда элемент имеет два отдельных класса преобразования вращения (rotateX, rotateZ), преобразования перестают работать, как я ожидаю.
Пожалуйста, смотрите мой пример здесь: 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");
});
Я бы ожидал, что я смогу перевернуть или повернуть окно в любое время, включив или выключив любой класс. Это не тот случай, когда оба класса были добавлены к нему.