Web前端(W3Cways.com) - Web前端学习之路
利用CSS3的 transform属性可以对元素进行缩放，倾斜和旋转。在任何现代浏览器上都可以实现。如果你需要支持Blackberry浏览器和Android的UC浏览器的话，则需要加-webkit-前缀，例如：
#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
但是，这会旋转整个元素包括元素的内容、边框和背景图像。如果你只想旋转背景图像怎么办？或者，如果您希望在旋转元素的时候，背景保持不动的时候怎么办呢？
目前，没有关于背景图像变型的W3C支持。这将是非常有用的，所以我怀疑最终会支持的，但这并不能帮助今天想使用这个效果的开发人员。
幸运的是，有一个解决办法。本质上，它是将背景图像应用于伪元素之前或之后，而不是父容器。然后伪元素可以单独变形。
只变形背景图片
容器元素可以使用任何样式，但必须将其设置为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);
}
同样，您需要调整大小和位置，以确保背景充分覆盖父容器。
支持现代浏览器及IE9以上。IE8将不显示变形，但背景会显示。
英文原文链接：https://www.sitepoint.com/css3-transform-background-image/
