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不會顯示任何轉換，但仍會顯示背景。