9WpdzHqVI

23朵毒蘑菇

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

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

css|transform

2023-04-23 10:26:43 已有版本 1 个 show:0.73kTYPE: blog

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

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

然后看了一下官方文档

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

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

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