添加转换值而不删除继承

Question

所以我有以下 CSS:

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

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

问题是 div.active 没有 translate 而只有 scale。

难道没有 CSS-only（我知道我可以）这样写的方式：

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

?

这是某种 CSS3 设计问题吗？

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>

您的 active class 的变换属性正在覆盖原始值。

您必须在您的活动 class.

中说明两者

注意：translate 值需要单位

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

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

添加转换值而不删除继承

Add a transform value without erasing inherit

css

css-transforms