引用自：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
一、transform
一個普普通通的元素，如果應用了CSS3 transform變換，即便這個transform屬性值不會改變其任何表面的變化（如scale(1), translate(0,0)），但是，實際上，對這些元素還是造成了寫深遠的影響。所謂表面無恙，內心奔潰的真實寫照。
以下就是自己列舉的幾個比較有代表性的表現示例，歡迎補充！
二、transform提升元素的垂直地位
我們可能都知道這樣一個規則，當遭遇元素margin負值重疊的時候，如果沒有static以外的position屬性值的話，后面的元素是會覆蓋前面的元素的。例如下面，后面的妹子覆蓋了前面的妹子：
<img src="mm1"><img src="mm2" style="margin-left:-60px;">
在transform出現之前，這個規則一直很穩健；但是，自從transform降臨，這個規則就變了。元素應用了transform屬性之后，就會變得應用了position:relative一個尿性，原本應該被覆蓋的元素會雄起，變成覆蓋其他元素，修改為如下代碼：
<img src="mm1" style="-ms-transform: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
可以看到，當頁面滾動時候，只有中間的妹子被滾走了：
注意，這個特性表現，目前只在Chrome瀏覽器/FireFox瀏覽器下有，IE瀏覽器，包括IE11, fixed還是fixed的表現。
四、transform改變overflow對absolute元素的限制
在以前，overflow與absolute之間的限制規范內容大致是這樣的：
absolute絕對定位元素，如果含有overflow不為visible的父級元素，同時，該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position為非static屬性的聲明，則overflow對該absolute元素不起作用。
比方說如下示意代碼：
<p style="width:96px; height:96px; border:2px solid #beceeb; overflow:hidden;">
<img src="mm1.jpg"style="position:absolute;" />
</p>
結果是這樣子，圖片溢出的右側還是可見的。
但是，一旦我們給overflow容器或者與圖片有嵌套關系的子元素使用transform聲明，呵呵呵，估計absolute元素就要去領便當了！
比方說，下面這個嵌套一層block水平標簽應用transform屬性后的效果：
這里地方小，借一步說話，您可以狠狠地點擊這里：transform對overflow absolute元素限制Demo
結果出現了有意思的瀏覽器兼容性差異：Chrome/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-08transform屬性還會創建層疊上下文，影響元素發生重疊時候的表現，可參見這篇文章“深入理解CSS中的層疊上下文和層疊順序”。