[Web/CSS] CSS - 복습6

✏️ 변형 함수

translate() 함수: 요소 이동하기
transform: translate(tx,ty)	지정한 크기만큼 x축과 y축으로 이동
transform: translate(tx,ty,tz)	지정한 크기만큼 x축과 y축, z축으로 이동
transform: translateX(tx)	지정한 크기만큼 x축으로 이동
transform: translateY(ty)	지정한 크기만큼 y축으로 이동
transform: translateZ(tz)	지정한 크기만큼 z츅으로 이동
scale() 함수: 요소 확대 및 축소하기
transform: scale(sx,xy)	지정한 크기만큼 x축, y축으로 확대 및 축소
transform: scale3d(sx,xy,sz)	지정한 크기만큼 x축, y축, z축으로 확대 및 축소
transform: scaleX(sx)	지정한 크기만큼 x축으로 확대 및 축소
transform: scaleY(xy)	지정한 크기만큼 y축으로 확대 및 축소
transform: scaleZ(sz)	지정한 크기만큼 z축으로 확대 및 축소
rotate() 함수 : 요소 회전하기
transform: rotate(각도)	지정한 각도만큼 회전
transform: rotateX(각도)	x축을 기준으로 지정한 각도만큼 회전
transform: rotateY(각도)	y축을 기준으로 지정한 각도만큼 회전
transform: rotateZ(각도)	z축을 기준으로 지정한 각도만큼 회전
transform: rotate3d(rx,ry,rz,각도)	x축, y축, z축을 기준으로 지정한 각도만큼 회전
skew() 함수: 요소 비틀기
skew(ax,ay)	지정한 각도만큼 x축과 y축으로 비틈
skewX(ax)	지정한 각도만큼 x축으로 비틈
skewY(ay)	지정한 각도만큼 y축으로 비틈

✏️ 트랜지션 속성

종류	설명
transition-property	트랜지션의 대상을 지정, 기본값은 all
transition-duration	트랜지션의 실행 시간 지정, 단위는 초이고 기본값은 0
transition-timing-function	트랜지션의 실행 형태를 지정
transition-delay	트랜지션의 지연 시간을 지정, 단위는 초이고 기본값은 0
transition	위의 속성들을 한꺼번에 지정

✏️ 애니메이션 속성

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 설정
animation-delay	애니메이션의 시작 시간을 설정
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 설정
animation-duration	애니메이션의 실행 시간을 지정, 단위는 초
animation-iteration-count	애니메이션의 반복 횟수 지정
animation-name	@keyframes로 설정해 놓은 중간 상태 지정
animation-timing-function	키프레임의 전환 형태 지정
animation	위의 속성들을 모두 한꺼번에 지정