Как повернуть только 1 изображение при наличии нескольких фоновых изображений в DIV?

Question

У меня есть following fiddle

Это 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

EDIT: упс, добавил г-индекс и ссылка обновлена, не заметила, что она была впереди :)