442
如何給背景圖像使用CSS3變形
CSS3的transform屬性可以縮放、傾斜和旋轉任何元素。在沒有任何瀏覽器前綴的前提下，這個屬性已經被所有的現代瀏覽器所支持。如果想支持黑莓瀏覽器和安卓版的UC瀏覽器，你就需要添加-webkit-前綴了。
#myelement{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
目前，W3C還沒有專門變形背景圖片的屬性。我相信在不久的將來肯定會出現這個非常實用的屬性。但是對於現在想實現相同效果的開發者們來說毫無幫助。
萬幸，這裏有個解決方法。其實，就是一個給父級容器元素before偽元素或者after偽元素添加背景圖片的hack。這時，我們就可以獨立控製帶有背景圖片偽元素的變形。
隻變形背景
為了控製偽元素在其父級容器內定位，其父級容器元素必須設置相對定位(position:relative)。為了防止背景溢出，你也需要給容器元素設置overflow:hidden;
#myelement{
position: relative;
overflow: hidden;
}
現在，我們來創建一個具有可以變形背景的絕對定位的偽元素。將偽元素的層級設置為-1(z-index:-1),保證其不遮蓋內容。
#myelement:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
注意，你需要調整偽元素的寬度、高度和定位。比如，當你使用重複圖片做背景時，旋轉的區域必須比其所在容器麵積大，以此保證全部覆蓋容器背景。
固定一個變形元素的背景
父級容器上的所有變形樣式都會繼承到其偽元素。因此，我們需要撤銷其偽元素的變形樣式。例如，如果容器旋轉30deg，其偽元素背景必須旋轉-30deg，這樣背景才能固定到某個位置。
#myelement{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);}#myelement:before{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
當然，你仍然需要調整偽元素背景的尺寸和位置，使其完全覆蓋父級容器。
下麵是CodePen上的相關實例：
https://codepen.io/SitePoint/pen/Ngpvwx
這種方法支持所有標準瀏覽器、edge、IE9~IE11。在IE8中不會有任何變形樣式，但是背景圖仍然顯示。
IE6和IE7不支持偽元素，因此背景圖不會顯示。然而，為了支持那些古老的瀏覽器，你可以直接給容器設置背景圖而不是用先進的選擇器或者一定條件的CSS將容器的背景設置為空。
大量創造性的應用都用到了CSS3的變形屬性。您有相關分享嗎？
本文為翻譯作品，原文來自sitepoint，作者Craig Buckler。原文地址：https://www.sitepoint.com/css3-transform-background-image/
歡迎關注個人公眾號，查看更多好文。
最後更新：2017-06-27 22:32:08