關於CSS3中transform屬性對元素佈局的影響。
阿新 • • 發佈：2019-02-06
今天瞭解transform屬性時發現一個奇怪的現象，就是使用transform屬性的時候，無論是translate,rotate,skew還是scale，對於偽元素:after和:before，都會產生影響。具體的這個影響體現在哪裡呢？我們通過一個例子來看一看（以下程式碼均針對webkit核心瀏覽器，其它瀏覽器鄙人還未去嘗試）：
先貼程式碼：
以上程式碼中，.drop-shadow樣式中的transform屬性被註釋掉了，大家可以看看效果。這個效果是我在w3cplus中大漠的程式碼中改編出來的。類似於一個資訊展示板，巧妙地利用了:after和:before兩個偽元素。此時:after和:before給我們設定了z-index屬性，因此可以很好地遮蓋。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .drop-shadow { width: 300px; height: 150px; position: relative; background: #ccc; margin-left: 100px; /* -webkit-transform: translate(20px,30px); */ } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; max-width: 150px; height: 20%; /*add box-shadow*/ -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8); -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8); box-shadow: 0 15px 10px rgba(125,125,125,0.8); /*add css3 transform*/ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .drop-shadow:after { right:10px; left: auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } </style> </head> <body> <div class="drop-shadow">drop shadow effect</div> </body> </html>
當我們加入了transform屬性後，會發現，:after和:before居然是暴露在drop-shadow的上面！
於是乎，鄙人就提出了一個問題，到底transform屬性是否會給元素佈局帶來影響呢？雖然此處:after和:before兩個偽元素的位置和佈局都沒受影響，但是不可否認的是在視覺上（或者專業點說是在檢視的渲染上）已經造成了影響。
那麼我們接下來繼續尋找問題的答案：
且看程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .board { position: relative; overflow: hidden; width: 500px; height: 500px; /*-webkit-transform: skew(2deg);*/ background: grey; float: left; } .main { list-style: none; } .main li:nth-child(1) { z-index: 2; position: absolute; width: 60px; height: 20px; background: blue; /*-webkit-transform: rotate(-45deg);*/ } .main li:nth-child(2) { position: absolute; z-index: 1; width: 400px; height: 100px; padding: 30px; background: green; } .right { float: left; } </style> </head> <body> <div class="board"> <ul class="main"> <li>part1</li> <li>part2</li> </ul> </div> <div class="right"> <ul class="side"> <li>part3</li> <li>part4</li> </ul> </div> </body> </html>
效果圖：
當將board樣式中transform樣式去掉時，效果如下：
比較明顯地看出佈局並未受明顯地影響。如果覺得還不夠明顯，我們接著把.main li:nth-child(1)中transform的註釋去掉：
由於transform變換預設以元素中心為基點，所以可以很明顯看出元素中心點並未偏移。故transform對元素佈局的影響並不存在。