How can I apply multiple transform declarations to one element?

Question

I have an element with two classes, one called \"rotate\" that will rotate the element 360 degrees and another called \"doublesize\" that will scale the element 2x its nor

Answer 1

You can't do this using just CSS, but if you don't mind using some jQuery, you can attach this effect using some jQuery:

var $elem = $('.cssDropPinImage');
$({ deg: 0 }).animate({ deg: 359 }, {
    duration: 600,
    step: function (now) {
        var scale = (2 * now / 359);
        $elem.css({
            transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
        });
    }
});

Hope this helps other readers, facing the same problem.