CSS transform属性是否可继承？实测与MDN文档描述存在矛盾的疑问

嘿，这个问题其实是个很容易混淆的点，我来帮你拆解清楚～

首先你说得没错，MDN确实明确说明transform属性是不可继承的，但你看到的子元素跟着父元素变形的现象，并不是因为继承，而是因为transform会创建一个局部变换上下文。

咱们先看你的测试代码：

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

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

当你给父元素div设置transform:skewX(20deg)时，这个元素的整个渲染坐标系被扭曲了——相当于把div所在的“画布”倾斜了20度。而它的所有子元素（比如这里的article）都是在这个已经被变换的画布上进行渲染的，所以看起来子元素也跟着倾斜了，但实际上：

• 你打开浏览器开发者工具查看article的计算样式，会发现它的transform属性值依然是默认的none，并没有继承父元素的skewX(20deg)；
• 如果你给article单独设置一个transform属性（比如transform: skewX(-20deg)），它会基于父元素的变换坐标系再做一次变换，最终文本会变回水平状态——这也能证明子元素并没有继承父元素的transform值，只是在父元素的变换上下文里渲染。

简单来说，transform的作用范围是元素自身及其所有子元素的渲染空间，但这是变换上下文的特性，和CSS的“继承”完全是两个概念：继承是子元素直接复用父元素的属性值，而变换上下文是父元素的渲染空间被改变，子元素只是在这个改变后的空间里正常渲染而已。

内容的提问来源于stack exchange，提问作者JianNCI