我是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中所占据的位置，是不会变换的。
参考例子：
最低0.47元/天 解锁文章
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
