Simple animations cannot animate CSS properties that are not numeric.
However, you can use the step function in the animate method to make it work.
For example: http://jsfiddle.net/kevalbhatt18/epp06LL3/2/
$('#box').animate({ transformValue: -180 }, {
step: function(now,fx) {
$(this).css('transform','rotatex('+now+'deg)');
},
duration:'slow'
},'linear');
UPDATE:
For updated example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/4/
If you simply add a div inside a parent span, it will work for all cases.
Note: You only need to know the first class, as shown in this example with the
box class. If you reach the last box, it will flip back to the first one.
$("div").click(function() {
var that = this;
$(this).animate({
transformValue: -180
}, {
step: function(now, fx) {
$(this).css('transform', 'rotatey(' + now + 'deg)');
},
complete: function() {
$(that).hide();
var nextObject = $(that).next()
var nextClass = nextObject.attr('class')
console.log($('#parent').children().hasClass(nextClass));
if ($('#parent').children().hasClass(nextClass)) {
var flipNext = nextClass;
console.log("true")
} else {
console.log("false")
var flipNext = "box";
console.log(flipNext);
}
secondFlip(flipNext, that);
},
duration: 'slow'
}, 'linear');
});
function secondFlip(nextID, that) {
$('.' + nextID).show();
$('.' + nextID).animate({
transformValue: 180
}, {
step: function(now, fx) {
$(this).css('transform', 'rotatex(' + now + 'deg)');
},
complete: function() {
},
duration: 'slow'
}, 'linear');
}
Update: Issue with rotation has been resolved
Check out this example: http://jsfiddle.net/kevalbhatt18/u2ptr4jp/6/
Final Result:
After several attempts, I finally found a solution.
Witness the solution here: http://jsfiddle.net/kevalbhatt18/oh07zuh0/
Here, I managed to determine the transformation degree.
(function ($) {
$.fn.rotationDegrees = function () {
var matrix = this.css("-webkit-transform") || this.css("-moz-transform") || this.css("-ms-transform") || this.css("-o-transform") || this.css("transform");
if (typeof matrix === 'string' && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
} else {
var angle = 0;
}
return angle;
};
}(jQuery));