7

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?

Community
  • 1
  • 1
Augustin Riedinger
  • 20,909
  • 29
  • 133
  • 206
  • 1
    I guess you could call this a design weakness. Same goes for `background-image`, `box-shadow` etc. A very cheap work around would be to add another child to `div.active` and perform the second transform on this child element. But is rather ugly, not always possible and requires changes to the dom. – Nico O May 21 '15 at 10:32

1 Answers1

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);
}
tig
  • 25,841
  • 10
  • 64
  • 96
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 1
    Which means that in the definition of `div.active`, I need to know about the `div` transform. If I don't, there is no other solution? – Augustin Riedinger May 21 '15 at 10:44
  • Some kind of software could add this missing features to CSS, just like we do with Javascript and Babel. – ichigolas Apr 26 '17 at 21:30
  • 7
    This is a big gap in the CSS spec. Now I cannot add another `transform` to an element on top of what I framework provided. – Eric Dec 01 '17 at 03:51
  • You can use CSS variables though, and those can be used inside a CSS transform. So you can extend a CSS transform down the inheritance chain: ` --extra-transform: ""; .above-myclass-1 { --extra-transform: var(--extra-transform) scale(1.2); } .myclass-1 { transform: var(--extra-transform) rotate(10deg); } ```` – strarsis Mar 19 '23 at 02:08