How to rotate only 1 image when there are multiple background images in a DIV?

Question

I have the following fiddle

This divcontaining 3 background images. As you can see, all the images rotate, but I want only the fan image to rotate. All others must remain in place. How to do this without adding additional divs?

Yours faithfully

Answer 1

Use one more element (in my example a pseudo-element ::after) only for the “fan”.

code:

.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;
}

:

EDIT: oops, z-index , , :)