css3를 활용한 모바일 daum 육면체 슬라이드 흉내내기

개인적으로 개편된 모바일쪽은 다음이 네이버보다 한수 위인거 같습니다.

뭐라 부르는지 모르겠는데 모바일 다음의 메인에 육면체가 슬라이드 되면서 페이징되는 기법(이하 슬라이드)를 보고 간만에 멋진것을 봤다고 느꼈습니다. 공부할 꺼리를 찾았던거 같습니다.

외국 사이트와 다음 소스를 분석해보니 키워드는 css의 preserve-3d,perspective,translate3d,rotateY(Z) 로 함축되더군요.

갈길이 먼 실력인지라 여까지 정리하는데 꽤 시간이 걸렸습니다. 특히 perspective 이놈은 생각과 다르게 값이 적을수록 큰 효과를 줍니다.

모양은 허접하게 만들었지만, 혹시 도움이 될까 정리해 보았습니다. 귀차니즘에 설명을 생략. 

js보다는 css쪽이 많은 역할을 합니다. 모바일에서 터치로 슬라이드 해보시면 daum과 엇비슷합니다 ㅋ;;;

테스트 브라우저 : chrome, safari, ff, mobile iphone/android

(미지원 2013.05 - opera, ie)

데모 : http://whatdo.net/html5/example/#8 

모바일 확인 링크 : http://whatdo.net/html5/example/mobileSlide.html