Add a transform value without erasing inherit [duplicate]

Question

So I have the following CSS:

div {
  transform: translate(10, 10);
}

div.active {
  transform: scale(1.1);
}

The problem is that a div.active doesn't translate and only scales.

Ain't there a CSS-only (with JS I know I can) way to write something like:

div.active {
  transform: inherit scale(1.1);
}

?

Is this some kind of CSS3 design issue?

Answer 1

div {
  transform: translate(10px, 10px);
  width: 100px;
  height: 100px;
  background: lightblue;
  display: inline-block;
  margin: 50px;
}
div.active {
  transform: translate(10px, 10px) scale(1.1);
}
div.active2 {
  transform: scale(1.1) translate(10px, 10px) rotate(45deg);
}

<div></div>
<div class="active"></div>

The transform property of your active class is overwriting the original value.

You would have to state both in your active class.

Note: translate values require units

div {
  transform: translate(10px, 10px);
}

div.active {
  transform: translate(10px, 10px) scale(1.1);
}