CSS3 - Transform, Transition (NULI 로고 분석)

http://html.nhndesign.com 

기본이미지에서 마우스를 올렸을때(오른쪽이미지) 로고 돌아감.

처음에는 신기하고 어떻게했을까, html소스보고, 그랬어도 잘몰랐었습니다.
그런데 시간이 지나고, 다시 소스를 보았더니, CSS3를 썼다는걸 알 수 있었습니다.

위사이트를 크롬이나 파폭,오페라로 들어가서, 로고에 마우스를 올리면 로고가 이쁘게 돌아가는 것을 확인 할 수 있다.

그래서 transform과 transition을 간략하게 살펴 보았습니다.

Transform

1.회전
rotate(각도)

ex) transform:rotate(15deg); 

2. 확대 및 축소
scale(sx,sy) : 가로로 sx만큼 세로로sy만큼 확대. sy값이 지정안됐을시, sx값과 같다고 가정함
scaleX(sx) : 가로로 sx만큼 확대 scale(sx,1)과 같음.
scaleY(sy) : 세로로 sy만큼 확대 scale(1,sy)와 같음
ex) transform:scale(1.5, 1.5); 

3. 왜곡
skew(각도,각도) : 첫번째 각도는 x축상의 왜곡각도 두번째 각도는y축상의 왜곡각도 (두번째값이 주어지지 않을시 y축에대한 각도를 0으로 간주)
skewX(각도) : x축을 따라 주어진 각도만큼 왜곡
skewY(각도) : y축을 따라 주어진 각도만큼 왜곡
ex) transform:skew(360deg, 360deg); 

4. 이동
translate(tx,ty) : x축으로 tx만큼, y축으로 ty만큼 이동시킴. ty값이 주어지지 않으면 0으로 간주
translateX(tx) : tx값만큼 x축 방향으로 이동
translateY(ty) : ty값만큼 y축 방향으로 이동 
ex)transform:translate(200px,100px); 

Transition 

 하나의 스타일에서 다른스타일로 바뀌는 것을 말하는데, 트랜지션에 걸리는 시간을 조절함으로써 좀더 애니메이션다운 효과를 만들 수 있다. 

-webkit-transition-property	애니메이션을 적용할 요소의 트랜지션 속성을 지정. 요소의 모든속성에 적용할 수도 있고, 일부 속성에만 애니메이션을 적용하고 나머지 속성은 그대로 유지할 수도 있다. 예)-webkit-transition-preoperty:all
-webkit-transition-duration	트랜지션이 시작해서 끝날 때까지 걸리는 시간을 초 단위로 지정 예)webkit-transition-duration:1s
-webkit-transition-timming-function	트랜지션의 형태는 ease, linear, ease-in, ease-out, ease-in-out, cubic-beizer 등 여러 종류가 있는데 그중에서 원하는 형태를 선택. 예)-webkit-transition-timmin-function:ease

 

한번에 줄여서 표시하기 : -webkit-transition: all 1s ease;

빨강 -webkit-transition-property 속성의 값
보라 -webkit-transition-duration 속성의 값
주황 -webkit-transition-timmin-function 속성의 값

transform.zip