如何在 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中文网其他相关文章！