Do It! 인터랙티브 웹 페이지 만들기 | Chapter04 정리

transform 속성

요소를 확대/축소, 회전, 비트는 등의 형태로 변형할 수 있는 속성이다.

속성명	속성값	설명
transform(2D)	scale	선택한 요소의 크기를 확대/ 축소 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소
	skew	선택한 요소를 x축 y축으로 비틀어서 변형. 원하는 각도를 지정하여 기울기 조절
	translate	현재 위치 기준에서 x축 또는 y축으로 이동
	rotate	원하는 각도 지정하여 회전
transform(3D)	rotateX, rotateY	x축 또는 y축으로 회전
	translateZ	z축으로 입체감있게 이동시킴
perspective	px	3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 원근감 부여
transform-style	preserve-3d	3D 효과가 적용된 요소에 모션 처리를 하면 3D 효과가 풀리는 것을 방지하기 위해 부모 요소에 적용
transform-origin	가로축, 세로축	요소의 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경

See the Pen translate by yejin (@geniest) on CodePen.

 

transition 속성

transition 속성은 요소의 속성값이 변경될 때 시간을 지정하여 일정 시간 동안 부드러운 모션 처리를 한다.

속성명	속성값	설명
transition-property	속성명	전환 효과를 줄 CSS 속성명을 지정한다. all을 입력하면 전체 속성을 사용할 수 있다. ( 여러개 지정 가능)
transition-duration	지속 시간	전환 효과가 발생할 때 지속할 시간을 나타낸다. ex) 0.5s -> 0.5초
transition-delay	지연 시간 ( 초 단위 )	전환 효과가 발생할 때 지연할 시간을 나타낸다. 지연 시간 이후 전환 효과가 나타난다.
transition-timing-function	가속도	linear : 등속 효과 ease : 가속 효과 ease-in : 모션 시작 시 가속 ease-out : 모션 종료 시 가속 ease-in-out : 모션 시작, 종료 시 모두 가속 cubic-bezier: 사용자가 지정한 가속 효과 적용
transition	속성명 / 전환 시간 / 가속도 / 지연 시간	속성값을 한꺼번에 축약해서 사용할 수 있다.

See the Pen transition by yejin (@geniest) on CodePen.