[CSS] 헷갈리기 쉬운 transition, transform, translate 정리

이번 포스팅에서는 그 이름부터 헷갈리는 CSS의 transition, transform, translate에 대해 한 번 정리해볼 것이다. 단, 각각의 기능에 대한 자세한 설명보다는 이 셋을 구별하기 위한 각각의 개략적인 특징에 대해서만 알아볼 것임을 참고해주기 바란다.

 

1. transition

CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다. 예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 어느 정도 원하는 대로 커스터마이징 가능하다. transition 속성은 transition-property, transition-duration, transition-timing-function, 그리고 transition-delay를 위한 단축 속성이며, 아래 예시를 통해 값을 어떻게 지정하는지 알아보도록 하자.

▼ 예시

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

 

2. transform

CSS의 transform 속성은 엘리먼트에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 때 사용한다. 조금 어려운 말로, transform 속성은 CSS의 시각적 서식 모델의 좌표 공간을 변형하는 역할을 수행한다. 이 속성의 값으로는 none(기본값) 혹은 하나 이상의 변형 함수(transform function)를 지정할 수 있다. 만약 여러 개의 변형 함수를 사용한다면 오른쪽 변형 함수부터 적용이 된다. 대표적인 변형 함수로는 회전을 위한 rotate() 함수, 크기 조절을 위한 scale() 함수, 기울이기를 위한 skew() 함수, 이동을 위한 translate() 함수가 있다. 자세한 변형 함수 목록을 살펴보고 싶다면 이곳을 참고하자.

 

▼ 예시

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

 

3. translate

앞서 설명한 것과 같이, CSS의 translate() 함수는 transform 속성에 사용할 수 있는 변형 함수 중 하나로 이동 효과를 담당한다. 조금 더 세분화하자면 translate(), translate3d(), translateX(), translateY(), translateZ() 함수들이 존재한다. 이 함수들은 엘리먼트를 현재 위치에서 지정된 값만큼 이동시키는 역할을 수행한다. 참고로 xy 좌표 공간(2D)에서 왼쪽 위가 (0, 0)이다. 일반적으로 수학에서 사용하는 xy 좌표 공간과 차이가 있어 혼란을 겪을까 봐 여기서 언급한다.

 

 

 

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

https://developer.mozilla.org/ko/docs/Web/CSS/transition

https://developer.mozilla.org/ko/docs/Web/CSS/transform

https://developer.mozilla.org/ko/docs/Web/CSS/transform-function