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

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.

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

Using CSS variables you can have this separation. The idea is to chain as many transformation as you want inside the element using CSS variables then later you update each variable individually:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1,translate(0)) /* we need a fallback value, we consider a null transform*/
    var(--t2,translate(0)) 
    var(--t3,translate(0));
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}

<div class="transitionease doublesize rotate "></div>

Answer 4

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.