[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

这篇文章，我讲了如何实现自适应屏幕宽度的canvas：《如何实现响应式canvas？保持canvas比例？教你让canvas自适应屏幕宽度！》，其中canvas的缩放依赖了transform这个CSS属性。

transform是指针对元素做一些2D/3D转换，本文讲解相关注意事项。

它在dom元素占据的位置，是变换前的形状和大小

transform的很多变换，都会修改dom元素的形状。

我们知道，transform只能作用于盒子模型的元素上，通常我们接触的都是盒子模型，例如display: block。

而这些元素，初始都是矩形，并且很正（是横平竖直的矩形）。

变换后，可能经过了旋转、拉伸，可能就变成了歪歪的平行四边形。

而transform变换后，该元素在dom中所占据的位置，是不会变换的！

也就是说，如果被transform变换的元素A，如果它后面有其它元素B，那么不管你咋变换A，B的位置是不会受影响的。这样DOM渲染效率就会高。

想想，为什么这么设计？

设想这样的情景：transform可以结合动画使用。如果你放了一个一直在旋转的矩形，那么它在y轴撑开的高度每时每刻都在改变，让它后面所有元素随着动画改变y坐标的话，就需要修改太多次了，严重影响性能。因此，transform变换后，元素在dom中所占据的位置，是不会变换的。

参考例子：

码上掘金

它的展示效果，会覆盖在其它元素上，无论其它元素z-index多大

参考例子：

码上掘金

这是因为 层叠上下文 (Stacking Context)，当你给一个元素设定了transform属性，它就是“高人一等”，会覆盖在其它没有transform元素的上面，无论其它元素的z-index有多大。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 文档根元素（）；
• position 值为 absolute（绝对定位）或  relative（相对定位）且 z-index 值不为 auto 的元素；
• position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
• flex (flex) 容器的子元素，且 z-index 值不为 auto；
• grid (grid) 容器的子元素，且 z-index 值不为 auto；
• opacity 属性值小于 1 的元素（参见 the specification for opacity）；
• mix-blend-mode 属性值不为 normal 的元素；
• 以下任意属性值不为 none 的元素：
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation 属性值为 isolate 的元素；
• will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
• contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

放缩、旋转等涉及「中心点」的变换，默认选元素正中心为「中心点」，可通过transform-origin修改

例如scale，默认是以中心来放大缩小的。也就是说，放缩前后：中心点位置不变。

通常针对scale，我们会习惯设置transform-origin为top或者top left，分别是以顶部中间为中心、以左上角为中心。

易踩坑的点: 0.5px分割线

如果你希望实现0.5px的分割线，并且这个分割线是用div实现的。你可能这么写：

<div class="divider">div>
1

.divider {
  height: 1px;
  transform: scaleY(0.5);
  background-color: gray;
}
1
2
3
4
5

但这样不对，因为它只是UI展示了0.5px高度，其实它依然是占据了1px的高度（参考第一点注意事项）。分割线跟其下方的其它元素的距离会有0.25px的误差（参考第三点注意事项）。

所以你最好这么写0.5px的分割线：

.divider {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  margin-bottom: -0.5px;
  background-color: gray;
}
1
2
3
4
5
6
7

但凡你是个追求极致的人，或者你的设计师是个追求极致的人，都容易发现这0.5px的误差。不要被坑啦！如果你有收获，麻烦点个免费的赞噢，感谢！

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。