我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景在这篇文章中，我谈到了如何实现一个自适应屏幕宽度的画布：《如何实现响应式canvas？保持canvas比例？教你让canvas自适应屏幕宽度！》，其中画布的缩放取决于CSS属性transform。Transform是指对元素做一些2D/3D的变换。本文介绍相关注意事项。它在dom元素中所占的位置是变换前的形状和大小变换。许多转换会修改dom元素的形状。我们知道transform只能作用于盒模型的元素。通常我们接触的是盒子模型，比如display:block。这些元素最初是矩形的并且非常正（水平和垂直矩形）。变形后，可能经过旋转拉伸，可能变成歪斜的平行四边形。transform变换后元素在dom中所占的位置是不会变换的！也就是说，如果transform变换后的元素A后面还有其他元素B，那么不管你怎么变换A，B的位置都不会受到影响。这样DOM渲染效率就会高。想一想，为什么要这样设计？想象一下变换可以与动画结合使用的场景。如果你放置一个始终旋转的矩形，那么它在y轴上的高度每时每刻都在变化。如果它后面的所有元素都随着动画改变了它们的y坐标，你需要修改太多次。严重影响性能。因此，transform变换后，元素在dom中所占的位置不会发生变换。参考示例：代码上的掘金它的显示效果会覆盖其他元素，无论其他元素的z-index有多大。参考例子：代码上的掘金这是因为堆叠上下文（StackingContext），当你设置一个元素如果加上transform属性，它就是“优越的”，并且会覆盖其他没有transform的元素，不管元素有多大其他元素的z-index是。文档中的堆叠上下文由满足以下任一条件的元素构成：文档根元素（）；position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘性定位）的元素（粘性定位适用于所有移动设备上的浏览器，但不适用于较旧的桌面浏览器）；一个弹性（flex）容器的子元素，并且z-index值不是auto；网格（grid）容器的子元素，且z-index值不是auto；opacity属性值小于1的元素（参见opacity规范）；mix-blend-mode属性值不是普通元素；具有以下任何属性值的元素，除了none：transformfilterbackdrop-filterperspectiveclip-pathmask/mask-image/mask-borderisolation属性值为isolate的元素；will-changevalues设置任意属性且该属性处于非初始值时将创建级联上下文的元素（参考本文）；contain属性值为layout、paint或包含其中之一的复合值（如contain:strict、contain:content）元素。涉及“中心点”的缩放、旋转等变换，默认选择元素的中心作为“中心点”，可以通过transform-origin修改，比如scale，通过默认为中心。也就是说，缩放前后：中心点的位置不变。通常对于scale，我们习惯将transform-origin设置为top或者topleft，分别以topmiddle为中心，以左上角为中心。容易踩到的点：0.5px的分界线如果要实现0.5px的分界线，而这个分界线是用div实现的。你可以这样写：
