CSS3 transform对普通元素的N多渲染影响

青旅半醒 2022-07-03 14:59 156阅读 0赞

### 一、一入transform深似海 ###

一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如`scale(1)`, `translate(0,0)`），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。

![色欲之罪-高瑟][-]

以下就是自己列举的几个比较有代表性的表现示例，欢迎补充！

### 二、transform提升元素的垂直地位 ###

我们可能都知道这样一个规则，当遭遇元素`margin`负值重叠的时候，如果没有static以外的position属性值的话，后面的元素是会覆盖前面的元素的。例如下面，后面的妹子覆盖了前面的妹子：  
![示意妹子][mm1.jpg]![mm2.jpg][]

在`transform`出现之前，这个规则一直很稳健；但是，自从`transform`降临，这个规则就变了。元素应用了`transform`属性之后，就会变得应用了`position:relative`一个尿性，原本应该被覆盖的元素会雄起，变成覆盖其他元素，修改为如下代码：

![示意妹子][mm1.jpg]![mm2.jpg][]

若想近距离体验，您可以狠狠地点击这里：[CSS3 transform覆盖后面的重叠元素Demo][CSS3 transform_Demo]

只要是支持transform元素的浏览器，包括IE9(`-ms-`), 都会提高普通元素的垂直地位，使其覆盖其他元素而不是被覆盖。

**更新于2016年1月9日**  
这种特性底层原理是层叠上下文，具体可参见“[深入理解CSS中的层叠上下文和层叠顺序][CSS]”一文。

### 三、transform限制position:fixed的跟随效果 ###

我们应该都知道，`position:fixed`可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们`position:relative/absolute`都限制不了。但是，真是一物降一物，`position:fixed`固定效果却被小小的`transform`给干掉了，直接降级变成`position:absolute`的蛋疼表现。

例如下面示意代码：

结果，本来应该不跟着滚动条滚动的傲娇`fixed`元素，变成`absolute`一样的行为表现，比方说下面这个妹子，其`position`属性值1000%是`fixed`，但是，却大失所望跟着滚动条混了，归根结底就是父元素加了个小小的`transform`属性值。

![示意妹子][mm1.jpg]

若想近距离体验，您可以狠狠地点击这里：[transform使position:fixed元素absolute化Demo][transform_position_fixed_absolute_Demo]

可以看到，当页面滚动时候，只有中间的妹子被滚走了：  
![transform限制fixed效果Demo截图][transform_fixed_Demo]

注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, `fixed`还是`fixed`的表现。

### 四、transform改变overflow对absolute元素的限制 ###

在以前，`overflow`与`absolute`之间的限制规范内容大致是这样的：

> absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。

比方说如下示意代码：

结果是这样子，图片溢出的右侧还是可见的。

![示意妹子][mm1.jpg]

但是，一旦我们给`overflow`容器或者与图片有嵌套关系的子元素使用`transform`声明，呵呵呵，估计`absolute`元素就要去领便当了！

比方说，下面这个嵌套一层`block`水平标签应用`transform`属性后的效果：

![示意妹子][mm1.jpg]

这里地方小，借一步说话，您可以狠狠地点击这里：[transform对overflow absolute元素限制Demo][transform_overflow absolute_Demo]

结果出现了有意思的浏览器兼容性差异：Chrome/Opera浏览器下，只有嵌套元素含有`transform`属性的时候，`absolute`元素才会被`overflow`隐藏；但是在IE9+/FireFox浏览器下，无论是overflow容器还是嵌套子元素，只要有`transform`属性，就会`hidden`溢出的`absolute`元素。

截图如下：  
![Chrome浏览器下截图][Chrome]  
![IE9浏览器下截图][IE9]

其中，有个表现是没有兼容性问题：就是`absolute`元素和`overflow`元素间，含有`transform`的时候，`absolute`会被隐藏。

### 五、transform限制absolute的100%宽度大小 ###

以前，我们设置`absolute`元素宽度100%, 则都会参照第一个非`static`值的`position`祖先元素计算，没有就`window`. 现在，诸位，需要把`transform`也考虑在内了。

您可以狠狠地点击这里：[transform与absolute宽度100%限制Demo][transform_absolute_100_Demo]

结果，无论是IE9+，还是Chrome还是FireFox浏览器，所有绝对定位图片`100%`宽度，都是相对设置了`transform`的容器计算了，于是，上面的图片拉长到了西伯利亚；下面的图片被限制成了小胖墩。

![transform对absolute宽度100%限制~][transform_absolute_100]

### 六、结语-欢迎大家补充 ###

我先自己补充一下，在mac safari浏览器下，使用`transform: translate3d(0,0,0)` 可以避免文字在其他元素`transition`或`animation`时候，粗细渲染跟着变化的问题。

感谢阅读，欢迎纠错！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。  
本文地址：[http://www.zhangxinxu.com/wordpress/?p=4799][http_www.zhangxinxu.com_wordpress_p_4799]

by [zhangxinxu][] from [http://www.zhangxinxu.com][zhangxinxu]

[-]: /images/20220618/5d151494631e47bdbc2d494e95a3250f.png
[mm1.jpg]: /images/20220618/a18dcb7e81dc4a0187363d58b20cdcee.png
[mm2.jpg]: /images/20220618/5815736a6ad14e57b93809393db39bda.png
[CSS3 transform_Demo]: http://www.zhangxinxu.com/study/201505/css3-transform-cover.html
[CSS]: http://www.zhangxinxu.com/wordpress/?p=5115
[transform_position_fixed_absolute_Demo]: http://www.zhangxinxu.com/study/201505/css3-transform-position-fixed-to-absolute.html
[transform_fixed_Demo]: /images/20220618/50e0fd2e08e5428f954686a73c014bb0.png
[transform_overflow absolute_Demo]: http://www.zhangxinxu.com/study/201505/css3-transform-overflow.html
[Chrome]: /images/20220618/177fab24a33a4682890893eed27cc4f8.png
[IE9]: /images/20220618/91c9ebf9ac064787bd9088ed4e3af127.png
[transform_absolute_100_Demo]: http://www.zhangxinxu.com/study/201505/css3-transform-absolute-percent-100.html
[transform_absolute_100]: /images/20220618/92e5e02699194f66ad0f76096ecabbb8.png
[http_www.zhangxinxu.com_wordpress_p_4799]: http://www.zhangxinxu.com/wordpress/?p=4799
[zhangxinxu]: http://www.zhangxinxu.com/