DIV에 여러 개의 배경 이미지가있을 때 단 하나의 이미지를 회전하는 방법?

Question

나는 가지고있다 following fiddle

3 개의 배경 이미지를 포함하는 div입니다. 보시다시피, 모든 이미지가 회전하고 있지만 팬 이미지 만 회전하고 싶습니다. 다른 모든 사람들은 머물러 있어야합니다. 여분 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- 인덱스는 추가 링크가 업데이트되었지만 그것이 앞쪽에 있다는 것을 알지 못했습니다.