CSS中有許多有趣的效果可以為網頁增添各種元素，其中一種效果就是旋轉背景圖片。無論是在設計網站還是展示某些元素時，這種效果都非常酷炫，為網頁增添了立體感。在這篇文章中，我們將介紹如何使用CSS來實現這種背景圖片旋轉效果。

.background {
background-image: url("example.jpg");
background-size: cover;
position: relative;
overflow: hidden;
}
.background::before {
content: "";
position: absolute;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
background-image: url("example.jpg");
background-repeat: no-repeat;
background-position: center center;
transform: rotate(45deg);
z-index: -1;
}

首先，我們需要創(chuàng)建一個帶有背景圖片的元素，這里我們使用一個class為background的div。然后，我們將div的position設置為relative，這將使內部的絕對定位元素相對于其父元素進行定位。

接下來，我們在這個div里面創(chuàng)建一個偽元素，將其的content屬性設置為空字符串。將偽元素的position設置為absolute，top，bottom，left，和right屬性都為-50%時，它將占據整個父元素的空間。我們還需要確保偽元素的z-index為-1，以使其背景圖片顯示在父元素的背后。

最后，我們使用transform屬性來將偽元素旋轉45度。由于偽元素具有父元素的位置和尺寸，因此其旋轉會使其背景圖片從中心（即父元素的中心）旋轉。這條樣式規(guī)則的效果是，使用了兩個相同的背景圖片，其中一個旋轉了45度。

現在，我們已經完成了CSS旋轉背景圖片的過程。通過上面的樣式規(guī)則，我們可以在任何地方使用它，為網頁的背景或其他元素增添立體感。