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

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);
}