如何將CSS3 transforms應用於背景圖像

CSS transformations雖然很酷，但尚未應用於背景圖像。這篇文章提供了一個很好的解決方法，當您確實想要旋轉背景圖像時，或者在容器元素旋轉時保持背景圖像不變。

使用css3轉換屬性能夠縮放、傾斜和旋轉任何元素。它在全部沒有廠商前綴的現代瀏覽器中都獲得支持。（我已經添加了-webkit-以防您但願支持一些較舊的瀏覽器。）

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
複製代碼

很棒的東西。可是，這會旋轉整個元素-其內容、邊框和背景圖像。若是你只想旋轉背景圖像怎麼辦？或者若是但願在元素旋轉時背景保持不變

目前，尚未W3C對背景圖像轉換的建議。這將是很是有用的，因此我懷疑最終會出現一個，但這對今天想要使用相似效果的開發人員沒有幫助。

幸運的是，有一個解決方案。本質上，這是一種將背景圖像應用於僞元素以前或以後的黑客行爲，而不是父容器。而後能夠獨立地轉換僞元素。

僅轉換背景

容器元素能夠應用任何樣式，但必須將其設置爲position:relative，由於咱們的僞元素將定位在該元素中。您還應該設置溢出：隱藏，除非您願意讓背景溢出容器以外。

#myelement {
position: relative;
overflow: hidden;
}
複製代碼

咱們如今能夠建立一個具備轉換背景的絕對定位的僞元素。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);
}
複製代碼

注意，您可能須要調整僞元素的寬度、高度和位置。例如，若是使用的是重複圖像，則旋轉區域必須大於其容器才能徹底覆蓋背景：

在轉換元素上固定背景

修復已轉換元素的背景。父容器上的全部轉換都應用於僞元素。所以，咱們須要撤消該轉換，例如，若是容器旋轉30度，則必須將背景旋轉-30度以返回到固定位置：

#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);
複製代碼

一樣，您須要調整大小和位置，以確保背景充分覆蓋父容器。

效果在全部主要瀏覽器中都有效，在Edge和Internet Explorer中均可以恢復到版本9。IE8不會顯示任何轉換，但仍會顯示背景。

原文地址：www.sitepoint.com/css3-transf…