css转换非常酷，但它们还不适用于背景图像。本文提供了一个巧妙的解决方法，适用于您确实想要旋转背景图像，或在其容器元素旋转时保持背景图像固定的那些时间。
有兴趣像专业人士那样掌握css3吗？tiffany brown的css master可以下载到所有sitepoint premium会员。或者，您只需19美元就可以获得该书的副本。
使用css3?transform属性可以缩放，倾斜和旋转任何元素。它在所有没有供应商前缀的现代浏览器中都受支持。（我已添加，-webkit-以防万一你想支持一些旧的浏览器。）
#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}好东西。但是，这会旋转整个元素 – 其内容，边框和背景图像。如果您只想旋转背景图像怎么办？或者，如果您希望在旋转元素时背景保持固定，该怎么办？
目前，没有针对背景图像转换的w3c提议。这将是非常有用的，所以我怀疑最终会出现一个，但这对今天想要使用类似效果的开发人员没有帮助。
幸运的是，有一个解决方案。从本质上说，它是其中背景图像适用于一劈before或after伪元件而不是父容器。然后可以独立地转换伪元素。
仅转换背景容器元素可以应用任何样式，但必须设置为position: relative，因为我们的伪元素将定位在其中。你也应该设置，overflow: hidden除非你很高兴背景溢出容器。
#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);
}同样，您需要调整大小和位置以确保背景充分覆盖父容器。
以下是codepen上的相关演示：
请参阅codepen上sitepoint（@sitepoint）的背景图像上的pen?css3转换。
效果适用于所有主流浏览器以及edge和internet explorer中的版本9. ie8不会显示任何转换但仍会显示背景。