CSS translate3d 요거 참 재미있는 속성이네요

우연히 페이스북을 돌아디니다 들어간 사이트~ http://www.usercible.com/

 

들어가자마자 여자가 아이패드를 들고 움직인다. 뒷배경과 살짝 어긋나 움직이면서 공간감이 느껴지는 메인 배너~ 오우 너무 멋집니다. 사실 예전에도 이런 비슷한 사이트를 본적은 있습니다만, 최근 블로그 스킨 고치며 새로운 기술들을 좀 둘러보다보니 더욱 눈이 끌리네요.

 

최근에 메인바탕이 바뀌었네요~

내용이 다를 수 있는 점 양해바랍니다.

 

 

 

 

 

 

그래서 좀 소스를 좀 살펴봤습니다.

 

 

 

그랬더니 처음보는 translate3d 속성을 보게되었네요. 이전에 transfrom:scale을 이용해서 이미지 위에 마우스를 갖다대면 살짝 커지는 효과를 주는 법을 포스팅한적이 있었는데요. 요건 또 처음 보는 속성이네요~ 그래서 검색을 좀 해봤습니다.

 

translate -> 요소 이동시키기

 

즉, 해당 요소를 설정한 수치만 이동시키는 속성이였습니다.

transform을 써서 사용해야하는데요. 형식은 아래와 같습니다.

 

transform:translate(tx,ty)

transform:translate(tx)

transform:translate(ty)

transform:translate(tz)

 

transform:translate3d(tx,ty,tz)

 

공통적으로 x축, y축, z축을 기준으로 tx,ty,tz만큼 이동한다라는군요~!~

 

저 위의 사이트는 그러니까 스크립트를 사용을 한걸로 보이긴 합니다만, 마우스를 움직이면 움직임에 따라 배경이미지 두개의 좌표를 바꿔준거 같네요~ 더 찾아보면 뭐 방법은 나올테고~ 시간있을때 좀 더 알아본 뒤 제 블로그 메인 배경에도 넣어봐야겠습니다.ㅎ

 

참고로, 저 위의 사이트만 잘 분석해봐도 써먹을게 많을거같네요. 아래 페이지들 요소들도 에니메이션이 들어가니까 뭔가 있어보이는군요~ 아 요즘 사이트들은 너무 어려워~

 

 

무지!

 

도움되셨다면 아래 하트버튼 꾸욱~!!!!