CSS로 만든 3D입체 이미지

오늘자 ajaxian을 보다가 굉장한 CSS 애니메이션을 보게되서 함 분석해 봅니다.

이미지 3개와 background-position프로퍼티와 :hover 가상클래스를 사용하여 3D입체 이미지를 구현했군요~

고생꽤나했을듯~ ㅠ.,ㅠ;   이런거 보면 대단하다 보다는 고생이 먼저 떠오르는 이유는 뭘까요?

사용한 이미지

사용된소스 : 원본

  

원본소스다운로드 : 

test.rar

이미지 하나에 background-position을 이용한 애니메이션

원본출처 : http://www.cssplay.co.uk/menu/streaker 

        

위 영역에 마우스를 올려보세요 ^^ 

이전에 포스팅한 CSS Sprites에서도 언급한 CSS background-position을 이용한 애니메이션입니다

사용된 이미지

소스