🎞️ CSS 트랜스폼(Transform)과 트랜지션(Transition) 요약!

인터렉션 디자인에 유용한 트랜스폼, 트랜지션, 애니메이션

 

CSS 트랜스폼

⭐ 트랜스폼(Transform)이란?

.transition {
    transform : rotate(45deg);
    transform : scale(2, 3);
}

• 특정 오브젝트를 각도를 튼다거나 크기나 위치를 변경하는 것
• 단독으로 사용할 경우 변형 과정이 보이거나 하지는 않음
• transform : 함수명(변수); 형식으로 입력
• 🐍 행렬 변환?

 

⭐ 트랜스폼의 종류

2D 트랜스폼

• ⭐ translate(tx, ty) : 지정된 크기만큼 x축과 y축 이동,
• trnaslateX(tx), translateY(ty)
• ⭐ scale(sx, sy) : 지정된 크기만큼 x축과 y축으로 확대 축소
• scaleX(sx), scaleY(sy)
• ⭐ rotate(각도) : 지정한 각도만큼 회전
• ⭐ skew(ax,ay) : 지정한 각도만큼 x축과 y축으로 왜곡?(기울이기)
• skewX(ax), skewY(ay)

3D 트랜스폼

• matrix3d(n [,n]) : 4x4 행렬을 이용해 이동과 확대/축소, 회전등 뭐든지 가능(www.w3.org/TR/css-transforms-1/#interpolation-of-3d-matrices)
• translate3d(tx, ty, tz) : 지정한 크기만큼 x, y, z 이동
• translateZ(tz)
• scale3d(sx, sy, sz) : 확대 축소
• scaleZ(sz)
• rotate3d(rx, ry, rz, 각도) : 지정한 각도만큼 회전
• rotateX(각도), rotateY(각도), rotateZ(각도) : 각 축으로 회전
• perspective(길이) : 입체적으로 보일 수 있는 깊이 값을 지정

🐍 3D 트랜스폼은 속성 지정이 필수

 

트랜스폼에 관련된 속성

transform-origin - 변형 기준점 설정하기

transform-origin:<x축> <y축> <z축> | initial | inherit;

• x축, y축 : 길이나 백분율, left, center, right
• z축 : 길이만 사용 가능

 

perspective, perspective-origin - 원근감 표현하기

perspective : <크기> | none;

속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐

 

perspective-origin :<x축 값> | <y축 값>;

좀 더 높은 곳에서 원근을 조절하는 듯한 느낌?

입체적으로 표현할 요소의 아랫부분 위치를 지정

값 : 웹 요소가 각 축에서 어디에 위치하는지 지정. 가능한 값은 길이 값, 백분율, left, right, center, 기본은 50%

 

transform-style - 3d변형 적용

transform-style : flat | preserved-3d

• flat : 하위 요소를 평면으로 처리
• preserve-3d : 하위 요소들에게 3D 효과를 적용

 

backface-visibility - 요소의 뒷면 표시

backface-visibility : visible | hidden

• visible : 뒷면 표시, 기본값
• hidden : 없다

 

⭐ prefix 접두사

이전 브라우저에서 호환되게 하려면 -webkit- -moz- -ms- -o- 접두사 붙여줘야

 

 

🐍 트랜스폼 관련 도움 사이트

https://css-playground.com/view/38/css-transforms

https://css-transform.moro.es/

 

CSS 트랜지션

⭐ 트랜지션(Transition)이란?

.transition {
    transition: width 2s linear 1s;
}

• CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나는 것
• 트랜스폼 이외에도 배경색 등 다른 요소에도 적용 가능
• :hover와 같은 가상 선택자와 같이 사용하기도

 

⭐ 트랜지션 관련 속성

transition-property - 트랜지션을 적용할 속성 지정하기

• all : 기본값, 모든 속성이 트랜지션 대상
• none : 트랜지션 동안 아무 속성도 바뀌지 않음
• <속성 이름> : 트랜지션 효과를 적용할 속성 이름을 지정. 배경색인지 width 암튼 바꿀 대상을 고를 수 있다. 속성이 여러 개일 경우 쉼표로 구분해 나열한다

 

transition-duration - 트랜지션 진행 시간 지정하기

초 또는 밀리초, 트랜지션 대상이 되는 속성이 여러 개라면 트랜지션 진행 시간도 쉼표로 구분

 

transition-timing-function - 트랜지션 속도 곡선 지정하기

• linear : 등속
• ease : 처음에는 느리게, 점점 빨라지다가 마지막에는 천천히 끝냄, 기본값
• ease-in : 시작 느리게
• ease-out : 느리게 끝냄
• ease-in-out : 느리게 시작하고 느리게 끝냄
• cubic-bezier(n,n,n,n) : 베지에 함수를 직접 정의해 사용한다. n에 사용할 수 있는 값은 0에서 1 사이
  직접 만져보려면 https://cubic-bezier.com/#.17,.67,.83,.67 여기로, 비교 가능

 

transition-delay - 지연 시간 설정하기

초나 밀리초, 기본값은 0s

 

transition - 트랜지션 속성 한꺼번에 표기하기

⭐ 주의 사항 : transition-duration은 항상 transition-delay보다 앞에 나와야 한다!