添加转换值而不擦除继承

Question

所以我有以下CSS：

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

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

问题在于div.active不translate且仅scale。

是否有仅限CSS （我知道我可以JS）写出类似的内容：

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

这是某种CSS3设计问题吗？

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

active类的transform属性会覆盖原始值。

您必须在活动班级中声明两者。

注意：translate值需要单位

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

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