如何在 CSS 捲軸按鈕內旋轉圖像而不旋轉按鈕本身？

在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中文網其他相關文章！