jQuery animation CSS transform rotate() function doesn't work with .click() event

I have an image which performs a number of animations. I want it to respond to the .click() event which already has CSS transform functions. I included all transform functions just to see how they work so then I can choose a right ones however, rotate() function is not taking effect with .click() event. Here is what I did so far

<img id="pngImg" src="nuts.png"/>  
  <input type="button" value="Click Me">

its script

$(document).ready(function(){
    var imageLogo = $('#pngImg');

        imageLogo.show(4000)
        .animate({easing: 'easeOutBounce' }, 1000)
        .animate({left: '200px'}, 2000)
        .animate({top: '200px'}, 2000)
        .animate({left: '0px'}, 2000)
        .animate({backgroundColor: 'green'})
        .hide(3000);

        $('input').click(function(){
            imageLogo.css('transform', 'translate(50px, 30px) rotate(360deg) scale(2,.5) skew(-35deg)', 5000);
        })
});

I tried to use

$('#pngImg').animate({transform:, 'translate(50px, 30px) rotate(360deg) scale(2,.5) skew(-35deg)', 5000});

method but without success. When I removed all CSS transform functions from the .click() button and leave only rotate() it is obvious that it's not functioning

Here is its style as well

#pngImg {
    position: absolute;
    top: 100px;
    right: 400px;
}
 input[type=button] {
    position: absolute;
    top: 120px;
    right: 420px;
}