添加变换值而不删除继承[重复]答案

【问题标题】：Add a transform value without erasing inherit [duplicate]添加变换值而不删除继承[重复]
【发布时间】：2016-10-17 00:00:13
【问题描述】：

所以我有以下 CSS：

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

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

问题是div.active 没有translate，只有scales。

难道没有CSS-only（我知道我可以使用JS）方式来编写如下内容：

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

这是某种 CSS3 设计问题吗？

【问题讨论】：

我猜你可以称之为设计缺陷。 background-image、box-shadow 等也是如此。一个非常便宜的解决方法是将另一个子元素添加到 div.active 并对该子元素执行第二次变换。但是相当丑陋，并不总是可能的，并且需要对 dom 进行更改。

标签： css 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>

active 类的转换属性正在覆盖原始值。

您必须在您的活动课程中声明两者。

注意：translate 值需要单位

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

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

【讨论】：

这意味着在div.active的定义中，我需要知道div的变换。如果我不这样做，有没有其他解决方案？
某种软件可以将这些缺失的功能添加到 CSS 中，就像我们使用 Javascript 和 Babel 一样。
这是 CSS 规范中的一大空白。现在我无法在我的框架提供的元素之上添加另一个 transform。