CSS3 스크롤에 움직이는 입체 이미지

오직 css3만을 사용한다. 스크롤에 따라서 움직임

본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/

필요로 사용된 이미지는 두개로 하나는  병이고 하나는 라벨

아 그리고 테스트결과 IE6 빼고 다적용됩니다.

코드는 무지무지 길다.

개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html

<div id="coke">
<div id="y">
<p id="x1"></p>
<p id="x2"></p>
<p id="x3"></p> 
...
...
......
<p id="x54"></p>
<p id="x55"></p>
<a href="http://www.romancortes.com/" target="_top">
      <img src="images/CSS3map/coke-can.png" alt="Pure CSS Coke Can by Román Cortés"></a></div>
  </div>

html에서 아이디는 번호순대로 나오니 가운데 생략

body
{ margin: 0;padding: 0;overflow: hidden; }
#coke
{ width: 510px; height: 400px; overflow: auto; }
img{ border: 0; margin-left: -172px; }
a{ display: block; padding-top: 19px; width: 194px; }
a:hover img {background: url(images/CSS3map/coke-title.png) no-repeat 15px 100px;}

div div
{ background-image: url(images/CSS3map/coke-scroll.png) no-repeat  0 0;
   padding-left: 300px;width: 660px;
}
p{ margin: 0; padding: 0; float: left; height: 336px;
   background-image: url(images/CSS3map/coke-label.jpg);
   background-attachment: fixed;
   background-repeat: repeat-x;
   width: 1px;
}

#x1 {background-position: 5px 46px;}
#x2 {background-position: 0px 46px;}
#x3 {background-position: -3px 46px;}
#x4 {background-position: -6px 46px;}
#x5 {background-position: -8px 46px;}
#x6 {background-position: -10px 46px;}
#x7 {background-position: -12px 46px;}
#x8 {background-position: -14px 46px;}
#x9 {background-position: -15px 46px;}
#x10 {background-position: -16px 46px;}
#x11 {background-position: -17px 46px;}
#x12 {background-position: -18px 46px;}
#x13 {background-position: -19px 46px;}
#x14 {background-position: -20px 46px;}
#x15 {background-position: -21px 46px;}
#x16 {background-position: -22px 46px; width: 2px;}
#x17 {background-position: -23px 46px;}
#x18 {background-position: -24px 46px; width: 2px;}
#x19 {background-position: -25px 46px; width: 2px;}
#x20 {background-position: -26px 46px; width: 2px;}
#x21 {background-position: -27px 46px; width: 2px;}
#x22 {background-position: -28px 46px; width: 3px;}
#x23 {background-position: -29px 46px; width: 3px;}
#x24 {background-position: -30px 46px; width: 4px;}
#x25 {background-position: -31px 46px; width: 5px;}
#x26 {background-position: -32px 46px; width: 7px;}
#x27 {background-position: -33px 46px; width: 12px;}
#x28 {background-position: -34px 46px; width: 55px;}
#x29 {background-position: -35px 46px; width: 11px;}
#x30 {background-position: -36px 46px; width: 6px;}
#x31 {background-position: -37px 46px; width: 5px;}
#x32 {background-position: -38px 46px; width: 4px;}
#x33 {background-position: -39px 46px; width: 3px;}
#x34 {background-position: -40px 46px; width: 2px;}
#x35 {background-position: -41px 46px; width: 3px;}
#x36 {background-position: -42px 46px; width: 2px;}
#x37 {background-position: -43px 46px; width: 2px;}
#x38 {background-position: -44px 46px;}
#x39 {background-position: -45px 46px; width: 2px;}
#x40 {background-position: -46px 46px;}
#x41 {background-position: -47px 46px;}
#x42 {background-position: -48px 46px;}
#x43 {background-position: -49px 46px;}
#x44 {background-position: -50px 46px;}
#x45 {background-position: -51px 46px;}
#x46 {background-position: -52px 46px;}
#x47 {background-position: -53px 46px;}
#x48 {background-position: -54px 46px;}
#x49 {background-position: -56px 46px;}
#x50 {background-position: -58px 46px;}
#x51 {background-position: -60px 46px;}
#x52 {background-position: -62px 46px;}
#x53 {background-position: -65px 46px;}
#x54 {background-position: -68px 46px;}
#x55 {background-position: -74px 46px;}

CSS는 그냥 올림 픽셀의 차이가 있기에 다 올렸다.그리고 이 CSS는 초기화 시킨 것에서 위치 지정한 것이니 유의하길