transform, transition

transform

element변형시 사용

요소의 회전, 크기조절, 기울이기, 이동효과를 부여하는 함수 제공

transform: transform 함수;

함수	설명	함수 인자 값
translate(x,y)	요소위치를 가로로x, 세로로y만큼 이동	css기본단위
translateX(n)	요소위치를 가로로 x만큼 이동	css기본단위
translateY(n)	요소위치를 세로로 y만큼 이동	css기본단위
sclae(x,y)	요소크기를 가로로 x배, 세로로 y배 확대또는 축소	0또는 양수
sclaeX(n)	요소크기를 가로로 x배 확대또는 축소	0또는 양수
sclaeY(n)	요소크기를 세로로 y배 확대또는 축소	0또는 양수
skew(x-angle,y-angle)	요소를 가로로 x각도만큼, 세로로 y각도 만큼 기울임	+-각도(단위:deg)
skew(x-angle	요소를 가로로 x각도만큼 기울임	+-각도(단위:deg)
skew(y-angle)	요소를 세로로 y각도만큼 기울임	+-각도(단위:deg)
rotate(angle)	요소를 주어진 각도만큼 회전시킴	+-각도(단위:deg)

 

transition

CSS프로퍼티 값 변경시, 값 변화가 일정 시간에 걸쳐 일어나도록 해서, 일종의 애니메이션 효과를 주는 기능

transition-property	트랜지션 대상이 되는 css프로퍼티 지정 디폴트는 all
transition-duration	트랜지션이 일어나는 일정시간을 초(s)또는 밀리초(ms)로 지정 디폴트는(0s)
transition-timing-function	특별한 함수를 통해 시간별 트랜지션 속도지정 디폴트ease
transition-delay	언제 트랜지션을 시작할지를 초(s)또는 밀리초(ms)로 지정 디폴트는(0s)
transition	모든 트랜지션 프로퍼티를 한번에 지정하는 단축 프로퍼티

트랜지션은 자동으로 발동되지않는다

가상 클래스 선택자 또는 js부수적인 액션에 의해 발동 

 

js 사이드바 만들다가 헷갈려서 다시 정리..