&nbs p;
一、一入transform深似海
一个普普通通的元素，如果应用了 CSS 3 transform变换，即便这个transform属性值不会 改变 其任何表面的变化（如 scale(1) , translate(0,0) ），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。
以下就是自己列举的几个比较有代表性的表现示例，欢迎补充！
二、transform 提升 元素的垂直地位
我们可能都 知道 这样一个规则，当遭遇元素 m arg in 负值重叠的时候，如果没有 stat ic以外的pos IT ion属性值的话，后面的元素是会覆盖前面的元素的。例如下面，后面的妹子覆盖了前面的妹子：
< img src="mm1"><img src="mm2" style="mar gin -left:-60px;">
在 transform 出现之前，这个规则一直很稳健；但是，自从 transform 降临，这个规则就变了。元素应用了 transform 属性之后，就会变得应用了 position:relative 一个尿性，原本 应该 被覆盖的元素会雄起，变成覆盖其他元素，修 改为 如下代码：
<img src="mm1" style="-ms -t ransform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">
若想近 距离 体验，您可以狠狠地点击这里：CSS3 transform覆盖后面的重叠元素Demo
只要是支持transform元素的浏览器，包括IE9( -ms- ), 都会 提高 普通元素的垂直地位，使其覆盖其他元素而不是被覆盖。
更新于2016年1月9日
这种特性 底层原理 是层叠上下文，具体可参见“深入理解CSS中的层叠上下文和层叠顺序”一文。
三、transform限制position:fixed的跟随效果
我们应该都知道， position:fixed 可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们 position:relative/absolute 都限制不了。但是，真是一物降一物， position:fixed 固定效果却被小小的 transform 给干掉了，直接降级变成 position:absolute 的蛋疼表现。
例如下面示意代码：
<p style=" transform:scale(1); "><img src="mm1. jpg "style="position:fixed;" /></p>
结果，本来应该不跟着滚动条滚动的傲娇 fixed 元素，变成 absolute 一样的行为表现，比方说下面这个妹子，其 position 属性值1000%是 fixed ，但是，却大失所望跟着滚动条混了，归根结底就是父元素加了个小小的 transform 属性值。
若想近距离体验，您可以狠狠地点击这里：transform使position:fixed元素absolute化Demo
可以看到，当页面滚动时候，只有中间的妹子被滚走了：
注意，这个特性表现，目前只在Ch rom e浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed 还是 fixed 的表现。
四、transform改变overflow对absolute元素的限制
在以前， overflow 与 absolute 之间的限制规范内容大致是这样的：
absolute绝对定位元素，如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。
比方说如下示意代码：
<p style="width:96px; h ei ght:96px; border:2px solid # beceeb; overflow:hidden;"> <img src="mm1.jpg"style="position:absolute;" /> </p>
结果是这样子，图片溢出的右侧还是可见的。
但是，一旦我们给 overflow 容器 或者 与图片有嵌套关系的子元素使用 transform 声明，呵呵呵，估计 absolute 元素就要去领便当了！
比方说，下面这个嵌套一层 block 水平标签应用 transform 属性后的效果：
这里地方小，借一步说话，您可以狠狠地点击这里：transform对overflow absolute元素限制Demo
结果出现了有 意思 的浏览器兼容性差异：C hr ome/ opera 浏览器下，只有嵌套元素含有 transform 属性的时候， absolute 元素才会被 overflow 隐藏；但是在IE9+/FireFox浏览器下，无论是overflow容器还是嵌套子元素，只要有 transform 属性，就会 hidden 溢出的 absolute 元素。
其中，有个表现是没有兼容性问题：就是 absolute 元素和 overflow 元素间，含有 transform 的时候， absolute 会被隐藏。
更新于2018-01-08
今天再次测试发现，Chrome浏览器已经 调整 了渲染表现，已经和IE9+/Firefox浏览器保持了一致，也就是“无论是overflow容器还是嵌套子元素，只要有 transform 属性，就会 hidden 溢出的 absolute 元素。”
截图如下：
五、transform限制absolute的100% 宽 度大小
以前，我们设置 absolute 元素宽度100%, 则都会参照第一个非 static 值的 position 祖先元素计算，没有就 window . 现在，诸位，需要把 transform 也考虑在内了。
您可以狠狠地点击这里：transform与absolute宽度100%限制Demo
结果，无论是IE9+，还是Chrome还是FireFox浏览器，所有绝对定位图片 100% 宽度，都是相对设置了 transform 的容器计算了，于是，上面的图片拉长到了西伯利亚；下面的图片被限制成了小胖墩。
六、结语-欢迎大家补充
我先自己补充一下，在mac safari浏览器下，使用 transform: translate3d(0,0,0) 可以避免文字在其他元素 transition 或 animation 时候，粗细渲染跟着变化的问题。
/ *
* 此处是你的位置，欢迎反馈其他transform的影响表现~
*/
自己补充于2018-01-08
transform 属性还会创建层叠上下文，影响元素发生重叠时候的表现，可参见这篇 文章 “深入理解CSS中的层叠上下文和层叠顺序”。
感谢阅读，欢迎纠错！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3 transform对普通元素的N多渲染影响 全部内容，希望文章能够帮你解决 html5教程-CSS3 transform对普通元素的N多渲染影响 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3 transform对普通元素的N多渲染影响的详细内容...