Add conversion value without deleting inheritance

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 does not translate and only scale s.

Isn't there CSS-only ( JS , I know I can) write something like:

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

?

Is this some kind of CSS3 design problem?

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 overwrites the original value.

You need to specify both in the active class.

Note : translate values ​​require units

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