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 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

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

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, ) /* we need a space as fallbak*/     var(--t2, )      var(--t3, ); }  .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>