在CSS 滾動條中旋轉背景圖像：解決旋轉之謎
問題：
中開發人員在嘗試在Chrome 捲軸按鈕內旋轉影像時遇到了挑戰。雖然 -webkit-transform 屬性成功旋轉了整個按鈕（包括其內容），但他們尋求單獨旋轉圖像的解決方案。
答案：
解決方案在於利用偽元素 :before，它在原始元素內創造一個附加元素。透過絕對定位偽元素，定義其尺寸，並將其相對於父元素定位，它就成為一個單獨的「層」。
CSS 程式碼片段：
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
transform: rotate(30deg);
}在此程式碼片段中，背景影像設定在偽元素內並使用 Transform 屬性進行旋轉。 z-index 確保影像圖層位於主元素內容的後方。透過調整 top 和 left 屬性，影像可以定位在元素內以圍繞其首選中心旋轉。
以上是如何在 CSS 捲軸按鈕內旋轉圖像而不旋轉按鈕本身？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
