How can I apply multiple transform declarations to

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 normal size:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

I'm guessing this does not work because the classes override each other's transform property?

I know that I could easily do this in one CSS rule like:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

But I would like to be able to apply each class separately from the other if it is possible.

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.

Answer 2

You can surely combine multiple animation, but not by combining CSS classes. See the first answer here : combining multiple css animations into one overall animation

The first part tells you how to combine animation with CSS with some parameters (delay, duration) :

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

For sure, you firstly need to define your animations.

Answer 3

I'm guessing this does not work because the classes override each other's transform property?

Correct. This is an unfortunate limitation as a side-effect of how the cascade works.

You will have to specify both functions in a single transform declaration. You could simply chain both class selectors together instead of creating a new class for a combined transform:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

... but as you can see, the issue lies in the transform property rather than in the selector.

---

This is expected to be rectified in Transforms level 2, where each transform has been promoted to its own property, which would allow you to combine transforms simply by declaring them separately as you would any other combination of CSS properties. This means you would be able to simply do this:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... and take advantage of the cascade rather than be hindered by it. No need for specialized class names or combined CSS rules.