网站设计如何将CSS3 transform应用于背景图像

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不会显示任何转换但仍会显示背景。