CSS 转换看起来很酷，但尚未应用于背景图像。 当您确实想要旋转背景图像，或者在旋转容器元素时保持背景图像不变时，本文提供了一个很好的解决方案。
使用 CSS3 变换属性来缩放、倾斜和旋转任何元素。 所有现代浏览器都支持它，无需供应商前缀。 （我已经添加了 -webkit- 以防您想支持一些较旧的浏览器。）
#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
好东西。 然而，这会旋转整个元素——它的内容、边框和背景图像。 如果您只想旋转背景图像怎么办？或者如果您希望元素旋转时背景保持不变怎么办
目前，W3C 没有针对背景图像过渡的建议。 它会非常有用，所以我怀疑最终是否会有这样的效果，但这对昨天想要使用类似效果的开发人员没有帮助。
幸运的是，有一个解决方案。 本质上，这是一种在伪元素（而不是父容器）之前或之后应用背景图像的技巧。 然后可以独立地转换伪元素。
仅转换背景
容器元素可以应用任何样式，但必须将其设置为position:relative，因为我们的伪元素将定位在该元素内。 您还应该设置溢出：隐藏，除非您愿意让背景溢出到容器之外。
#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);
}
请注意，您可能需要调整伪元素的长度、高度和位置。 例如css3 背景 旋转，如果您使用重复图像，则旋转区域必须小于其容器可以完全覆盖背景的区域：
在此插入图片描述
固定过渡元素的背景
修复变换元素的背景。 父容器上的所有转换都应用于伪元素。 因此，我们需要撤消该变换，例如css3 背景 旋转，如果容器旋转 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);
同样，您需要调整大小和位置以确保背景充分覆盖父容器。
该效果适用于所有主要浏览器，在 Edge 和 Internet Explorer 中恢复为版本 9。 IE8不显示任何过渡，但仍然显示背景。
发表评论