How to rotate just 1 image when having multiple background images in a DIV?

Question

I have the following fiddle

It is a div containing 3 background images. As you can see, all images are rotating, but I want just the fan image to be rotating. All others should stay put. How to do this without adding extra div's?

Kind regards

Answer 1

Use another element (in my example, the ::after pseudo element) for the "fan" only.

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

Also discover the beauty of a Prefixer, and create cross-browser code for free:

Running demo

EDIT: oops, z-index added and link updated, didn't noticed it was on front :)