Question

您好我从官方MDN页面上读到了一个问题，该页面清楚地显示transform属性未被继承。但在大多数情况下，这是不正确的：

＆＃13;

    div{
      display:table;
      width:50%;
      margin:0 auto;
      transform:skewX(20deg);
      border:2px solid teal;   
    }

＆＃13;

    <div>
      <article>transform is inherited or not?</article>
    </div>

＆＃13;

从上面的代码示例中，来自article元素的文字明显受我从其父transform:skewX(20deg)设置的div影响。

所以我的问题是：

1.是否所有transform属性都将自动应用于其子元素？例如scale() translate()。

2. transform是font-size的继承属性吗？

Answer 1

transform不是继承的属性。如果你研究一下你的devtools，你可以很容易地看到它。例如，在chrome devtools中，计算属性选项卡将显示您文章的值为none。

然而，根据规范，变换将为其子项创建一个新的“坐标空间”，这就是您的示例中发生的事情。文章的transform属性值为none，但这并不意味着它不受父级转换的影响。

官方规范：https://www.w3.org/TR/css-transforms-1/#transform-rendering

Answer 2

你对继承的真正含义感到困惑。如果你的transform:skewX(20deg);会继承下去，那么你的div会倾斜20度，你的文章会倾斜40度（20 + 20）

这就是看起来的样子：

div{
  display:table;
  width:50%;
  margin:0 auto;
  transform:skewX(20deg);
  border:2px solid teal;   
}

article{
  transform:skewX(20deg);
}

<div>
  <article>transform is inherited or not?</article>
</div>

所以它不是真正的遗传，而是更接近于不透明度的行为，当变换的孩子“零”将相对于父母时，就像孩子的最大不透明度将是父不透明度（如果你有一个不透明度50％的孩子在50％不透明度的父母，然后在视觉上孩子是25％不透明）除了变换之外，你可以通过应用相反的值来解除这个，而不能用不透明度做（不存在不透明度：200％）这是看起来像：

div{
  display:table;
  width:50%;
  margin:0 auto;
  transform:skewX(20deg);
  border:2px solid teal;   
}

article{
  transform:skewX(-20deg);
}

<div>
  <article>transform is inherited or not?</article>
</div>

CSS转换属性是否继承？

2 个答案: