Добавить преобразование значений без удаления наследования [дубликат]

На этот вопрос уже есть ответ здесь:

Итак, у меня есть следующий CSS: 

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

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

Проблема в том, что a div.active не translate и только scales.

Нет ли CSS-только (с JS я знаю, что могу) способ напишите что-нибудь вроде: 

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

?

Это какая-то проблема с дизайном CSS3?

1 5
css css3 css-transforms

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>
Свойство transform вашего класса active перезаписывает исходное значение.

Вы должны были бы указать оба в вашем активном классе.

Примечание: translate значения требуют единиц 

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

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