[CSS] CSS 속성 - 전환(transition), 변환(transform)

전환

transition

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

transition: 속성명 지속시간(필수) 타이밍함수 대기시간;

 

transition-property

전환 효과를 사용할 속성 이름을 지정

기본값 all 모든 속성에 적용

 

transition-duration

전환 효과의 지속시간을 지정

기본값 0s 전환 효과 없음

 

transition-timing-function

전환 효과의 타이밍(Easing) 함수를 지정

기본값 ease 느리게 - 빠르게 - 느리게

linear, ease-in, ease-out, ease-in-out

 

transition-delay

전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

기본값 0s 대기시간 없음

 

변환

transform

transform: 변환함수1 변환함수2 변환함수3 ... ;

transform: 원근법 이동 크기 회전 기울임;

 

2D 변환 함수

translate(x, y) 이동(x축, y축)

translateX(x) 이동(x축)

translateY(y) 이동(y축)

scale(x, y) 크기(x축, y축)

rotate(degree) 회전(각도)

skewX(x) 기울임(x축)

skewY(y) 기울임(y축)

 

3D 변환 함수

rotateX(x) 회전(x축)

rotateY(y) 회전(y축)

perspective(n) 원근법(거리)