회전 이미지에 이미지 맵 추가

Question

그래서 현재 360도 회전하는 이미지가 무한 루프에 있습니다. 이미지에 8 개의 다른 제품이 있고 전체 이미지 자체를 한 페이지에 연결하는 대신 이미지가 360도 회전하면서 각 제품을 개별적으로 매핑 할 수있는 방법이 있는지 궁금합니다.

나는 현재 간단한 CSS3 이미지를 사용하고 아래와 같이 볼 회전 :

.animation 
{ 
    -webkit-animation:spin 18s linear infinite; 
    -moz-animation:spin 18s linear infinite; 
    animation:spin 18s linear infinite;   
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

사람은 지금이 이전에 구현 봤어?

Answer 1

이것은 정말 어려운 문제입니다. 이 경우 이미지 맵을 개인적으로 사용하지 않지만 클릭 가능한 div는 opacity:0입니다.

이렇게하면 이미지로 회전 할 수 있지만 transform-origin 속성을 변경하면 회전 지점이 동일 해집니다.