DIV中有多个背景图像时，如何只旋转一张图像？

Question

我有以下小提琴

它div包含3个背景图像。如您所见，所有图像都在旋转，但是我只希望风扇图像在旋转。所有其他人应保持不变。如何在不添加额外div的情况下执行此操作？

亲切的问候

Answer 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 并更新了链接，没有注意到它在前面:)