在 DIV 中有多个背景图像时如何仅旋转 1 个图像？答案

【问题标题】：How to rotate just 1 image when having multiple background images in a DIV?在 DIV 中有多个背景图像时如何仅旋转 1 个图像？
【发布时间】：2013-12-23 16:27:00
【问题描述】：

我有following fiddle

这是一个div，包含 3 个背景图片。如您所见，所有图像都在旋转，但我只希望风扇图像在旋转。所有其他人都应该留在原地。如何在不添加额外 div 的情况下做到这一点？

亲切的问候

【问题讨论】：

为刀片尝试一个 ::after 伪元素。

标签： css transform image-rotation animate.css

【解决方案1】：

仅对“粉丝”使用另一个元素（在我的示例中为 ::after 伪元素）。

代码：

.tile10 {
    position: absolute;
    width: 80px;
    height: 80px;
    background: url(http://www.mauricederegt.nl/tile1.svg), url(http://www.mauricederegt.nl/gaas.png);
    background-repeat: no-repeat;
    background-position: 0 0, 0 0;   
}

.tile10::after{   
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    background: url(http://www.mauricederegt.nl/fan.svg);
    background-repeat: no-repeat;
    background-position: 6px 5px;
    -webkit-animation: rotate 2s linear infinite;     

    /* Put the Fan behind the other pictures */
    z-index: -1;
}

还发现Prefixer 的美妙之处，并免费创建跨浏览器代码：

Running demo

编辑：哎呀，添加了 z-index 并更新了链接，没有注意到它在前面 :)

【讨论】：

看起来不错，但风扇现在位于图像顶部而不是图像后面