[CSS] transition / transform 정리

1) Transition

 

/* 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;

CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다.

 

속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다.

 

예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 어느 정도 원하는 대로 커스터마이징 가능하다.

 

transition 속성은 transition-property, transition-duration, transition-timing-function, 그리고 transition-delay를 위한 단축 속성이며, 위 예시를 통해 값을 어떻게 지정하는지 알아보도록 하자.

 

2) Transform

/* 키워드 값 */
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;

CSS의 transform 속성은 엘리먼트에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 때 사용한다. 조금 어려운 말로, transform 속성은 CSS의 시각적 서식 모델의 좌표 공간을 변형하는 역할을 수행한다.

 

이 속성의 값으로는 none(기본값) 혹은 하나 이상의 변형 함수(transform function)를 지정할 수 있다.

 

만약 여러 개의 변형 함수를 사용한다면 오른쪽 변형 함수부터 적용이 된다. 대표적인 변형 함수로는 회전을 위한 rotate() 함수, 크기 조절을 위한 scale() 함수, 기울이기를 위한 skew() 함수, 이동을 위한 translate() 함수가 있다.

 

출처 : https://it-eldorado.tistory.com/110

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