multiple transform animations in jQuery

Problem

I have a 2 part question:

1 . how can I animate in jQuery multiple transformation (such as scale() + rotate()) simultaneously on click?

(I've tried using the step function like this:

$("target").animate({'left':'100px',myScaleProperty: 2, myRotationPreperty: 180}, {step: function(now,tween) {
if (tween.prop == myScaleProperty) {
$(this).css({'transform','scale('+now+')'})
}
if (tween.prop == myRotationProperty){
$(this).css({'transform','rotate('+now+'deg)'})
}
},duration:'slow','linear'})

2 . how can I make a reversible animation on jQuery (without defining another reverse animation function)?

Problem courtesy of: Yoti

Solution

I've a blog post showing how to scale and rotate at the same time

http://bcksp.blogspot.com/2011/12/css3-based-animation-instead-of-jquery.html

here is the fiddle

http://jsfiddle.net/alsadi/sFzSR/

having such css you can use jquery to add the animation class or remove it

transform:rotate(180deg) scale(0.5);

in jquery javascript it might look like this

 $(this).css({transform:'rotate(180deg) scale(0.5)'})

UPDATE: replace infinite transition animation loop with single trigger-based transform

Solution courtesy of: muayyad alsadi

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.