经常遇到transform不生效的情况,其实就是作用的元素是行内容器,所以不行

css transform

10:26 · 2023年04月23日 · 周日 show: --

css transform无效,transform在行内容器上面是不起作用滴

经常遇到transform不生效的情况,其实就是作用的元素是行内容器,所以不行

css transform无效,transform在行内容器上面是不起作用滴

具体原因,看了一些文章,说是设置display的属性值,除了inline/contents/table-*不行,其他都可以。

然后看了一下官方文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

原话:只能转换由盒模型定位的元素。根据经验,如果元素具有display: block,则由盒模型定位元素。

所以像 span,a 标签这样的行内容器上设置 transform是没有效果的,可以设置该元素的dispaly属性来让他成为盒子模型。