[CSS] Chapter 14. transform 의 사용

1. 모양을 변화시키는 transform

transform은 html에서 보이는 화면에 적용한 객체를 변화시키는 역할을 한다.

CSS3 이전에는 JavaScript를 이용하여 동적 움직임을 부여했지만 CSS3가 나온 이후로 CSS 명령어를 통해 객체의 움직임을 변화시키거나 애니메이션 효과를 줄 수 있다. 

transform은 객체의 모양을 자신이 원하는 대로 변화시킬 수 있고, 변화하는 시간을 설정하여 애니메이션 효과를 줄 수 있다. 

하지만, 실제 디자이너가 이러한 동적 움직임을 직접 부여하거나 영상을 삽입하는 것이 더욱 쉬운 것이 사실이며, 애니메이션 특성상 반응에 따라 하나하나 변화하는 것을 관찰하는사용자가 있을리 만무하므로 ‘기능’ 정도만 인식하도록 하자.

 

 (YouTube에서 5초 광고 나오는 것도 짜증이 나는 세상인데 CSS를 통해 디자이너가 넣은 애니메이션을 좋게 봐줄리 만무하다.)

 

2. transform의 사용 

transform으로 지정할 수 있는 효과는 다양한데, 모양을 동적으로 변화시키기 때문에 속성 정보에 함수를 사용한다. 

 

1)  transform: translate(X, Y);

 X와 Y값을 기입하여 평면상에서 객체를 이동시킬 수 있다. 기본 단위는 px이며 기존 객체의 중심값을 기준으로 이동한다. 

 

2) transform: scale(X, Y);

 객체의 기본 사이즈에서 크기를 작거나 크게 변화시킨다. 기본 단위는 배율이며, 배율로 적용하여 1을 기본 사이즈로 정한다. 1.1 배율을 적용하면 반응형 웹사이트에서 보이는 메뉴 효과처럼 지정할 수 있다.

 

3) transform:rotate(N deg);

 객체의 기본 중심점을 중심으로 각도를 변화시킨다. 360도 법을 기준으로 모양이 적용되는 것이 특징이다. 기본 단위는 deg를 사용하면 이는 degree의 약자이다. 

 

4) transform: skew(X deg, Y deg);

 해당 속성은 객체의 모양을 비트는데 사용한다. 중심점을 기준으로 기입한 각도만큼 비틀어져 표시된다. 

 

3. 3D로 모양 변환하기 

3D로 모양을 변환하는 것 또한 가능한데, 3D 동작이므로 중심점에 대한 데이터가 필요하다.

perspective(원근법) 속성이 상위 요소에 적용되어 있어야 한다.

상위 div에 perspective: N px; 를 기입하면 해당 div에 원근법의 기준 속성이 부여된다.

 

상위 속성에 원근법 속성이 부여되면 하위 div는 이를 중심으로 변화한다.

해당 속성을 부여하지 않으면 2D로만 모양이 구현되거나 변화하지 않으므로 반드시 기입이 필요하다. 

또한, perspective는 값이 커질수록 변화 값이 줄어드는데 해당 값이 로그로 적용되기 때문이다. 

 

1) rotate(N deg):

상위 요소에 perspective가 적용된 상태라면 해당 기준점을 중심으로 회전을 진행한다.

rotate 뒤에 X, Y, Z 값을 지정하여 각기 다른 모양을 구현할 수 있다. 

 

2) transform:translate(N px);

상위 요소에 perspective가 적용된 상태라면 해당 기준점을 중심으로 이동하는데 X, Y, Z 값에 따라 상이하게 이동한다.

Z 값에 속성을 부여하면 Scale과 유사한 효과를 보인다.을 진행한다.

translate 뒤에 X, Y, Z 값을 지정하여 각기 다른 모양을 구현할 수 있다. 

 

3) transform:rotate3d(X, Y ,Z ,10deg);

3D로 모양을 회전시킨다. Vector 데이터를 중심으로 변화하므로 XYZ의 값을 지정해야한다.

해당 기본 단위는 배율이기 때문에 1.1 등 배수로 지정해야 한다. 

각도는 전체적인 회전 모양을 말하면 입력한 각도에 따라 rotate와 같이 변화하는 값이 상이하다. 

 

4. 애니메이션 효과 transition

transform은 변화할 모양과 시간, 딜레이를 지정할 수 있다.

이와 같은 속성을 지정하면 변화에 지정한 시간만큼 움직임을 소요하므로 동적인 애니메이션 효과를 연출 할 수 있다.

 

1) transition-property: 영역;

 transition이 지정될 영역을 설정한다. 영역은 길이나 너비, 배경 색 등 다양하게 지정할 수 있으며 all 로도 지정이 가능하다.

일반적으로 duration과 짝을 이루어 사용하는데, 이는 duration으로 동적 변화의 시간을 설정하지 않으면 브라우저가 즉시 모양을 변경하기 때문이다. (이 경우 사실상 transform과 다르지 않다. 

 

2) transition-duration: 시간;

지정한 속성으로 변화하기까지 걸리는 시간을 지정한다.

10s를 입력하면 속성이 변화하는데 10초의 시간이 소요되며, 애니메이션 효과는 브라우저가 자동으로 적용한다.

예를 들어 black 에서 crison으로 배경색을 바꾼다면 두 색의 ‘사이색’은 컴퓨터가 자동으로 연산하여 채운다는 것이다. 

 

3) transition-delay: 시간;

동적 변화를 시작하기까지의 딜레이를 설정한다.

1초에 1s로 적용하며 입력한 단위만큼 특정 동작의 시작까지 시간을 소용한다. 

 

4) transition-timing-function: 속성;

트랜지션으로 변화하는 시간의 강약을 조절할 수 있다.

동일한 속도로 변화할 것인지, 중간에 빨라질 것인지를 판단하는 것이다.

속도에 대한 그래프와 정보는 [https://easings.net/] 를 통해 확인할 수 있다.

 

속성	효과
linear	등속 변화, cubic-bezier(0, 0, 1, 1)과 같다.
ease	느리게 시작했다가 빨라졌다 다시 느려진다. cubic-bezier(0.25, 0.1, 0.25, 1)과 같다.
ease-in	점점 빨라진다. cubic-bezier(0.42, 0, 1, 1)과 같다.
ease-out	점점 느려진다. cubic-bezier(0, 0, 0.58,1)과 같다..
ease-in-out	처음과 끝이 느리다.. cubic-bezier(0.42, 0, 0.58,1)와 같다.
cubic-bezier(N,N,N,N)	값을 입력하여 가/감속을 조작한다.

 

5) transition:width 2s, height 2s, background-color 2s, transform 2s;

트랜지션에 각 변화시킬 항목과 시간을 처음부터 지정할 수 있다.

이 경우 세부적인 항목 설정보다 쉽기 때문에 이용이 용이하다.

 

5. transition 속성값 목록이 다른 개수를 가진 경우

만약 트랜지션으로 지정된 속성값과 시간 값이 다르다면, 시간 값을 임의로 속성 항목에 할당한다.

반대의 경우에는 왼쪽부터 작성된 시간을 우선하여 적용되고 나머지 시간 값은 적용되지 않는다. 

 

 

6. transition 을 적용한 모양

1) transform 

 

2) transform, 원근법

 

3) transition