写点什么

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

作者:HullQin
  • 2022 年 8 月 21 日
    广东
  • 本文字数:1872 字

    阅读完需:约 6 分钟

[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有多大。


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


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

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


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

易踩坑的点: 0.5px 分割线

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


<div class="divider"></div>
复制代码


.divider {  height: 1px;  transform: scaleY(0.5);  background-color: gray;}
复制代码


但这样不对,因为它只是 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;}
复制代码


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

写在最后

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

发布于: 刚刚阅读数: 4
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[CSS入门到进阶] 用transform后z-index失效了?总结transform的注意事项!_CSS_HullQin_InfoQ写作社区