CSS 변환

개요. 

CSS를 사용할 때 특정 요소를 변경하는 방법은 몇가지가 있다. 

요소의 크기를 크게 만드려면 width와 height 값을 조절하면 가능하다. 

 

또한 위치를 이동시키려면 position을 absolute로 바꾸고 top이나 left 값 등을 바꿔주면 가능하다.

 

또다른 방법으로는 transform이 존재한다. width, height 또는 position과 비교했을 때 어떤 차이점이 있길래

transform이 생겨났을까? 

 

바로 성능적인 부분에서 차이가 난다. 

width와 height을 사용하는 방식은 문서의 레이아웃을 다시 계산하고 요소를 재배치해야해서 브라우저에 많은 계산을

요구한다. 하지만 transform 속성을 사용하면 GPU 가속을 활용해서 요소의 크기를 조절하므로 성능상 이점이 있다. 

 

위가 width와 height을 사용하는 방식이고 아래는 transform을 사용하는 방식이다. 

transform을 사용하는 방식은 레이아웃을 다시 계산하는 작업을 할 필요가 없는 것을 알 수 있다.

 

또한 왼쪽에서 오른쪽, 위에서 아래로만 크기가 커지는 것과 다르게 transform을 사용하면 기본적으로는 

가운데에서부터 커지지만 원하는 위치에서 커지게 하는 작업도 가능하다. 

 

Transform. 

사용하는 방법은 익숙할텐데 scale, rotate, skew, translate 등을 사용할 수 있다. 

.transform { 
  transform: scale(2);          <-- 크기 조절
  transform: rotate(45deg);     <-- 회전
  transform: translate(100px);  <-- 이동
  transform: skew(30deg);      <-- 비틀기
}

 

scale 

크기를 조절하는 속성이다. 음수와 소수점도 사용이 가능하고 기본 값은 1이다. 

 

rotate 

회전을 시킬 수 있는 속성이다. 음수가 사용 가능하고 deg 단위로 값을 줄 수 있다. 

기본 값은 0deg이다. 

 

translate 

위치를 이동시키는 속성이다. 음수가 사용이 가능하며 px 단위로 값을 줄 수 있다. 

기본 값은 0px이다. 

 

skew 

요소를 비틀 수 있는 속성이다. 기본적인 사용 방법은 rotate와 동일하다. 

 

또한 기준점을 변경할 수 있다. 

 

transform-origin

transform-origin: left top;

 

transform-origin 속성을 사용해서 기준점을 변경할 수 있는데, top, bottom과 left, right 속성으로 사용할 수 있다. 

left, top 대신 숫자 값으로도 사용이 가능하다 : 

transform-origin: 0% 0%;

 

첫번째 값은 x축이고, 두 번째 값은 y축이다. 

left 같은 키워드보다 숫자로 사용하는 것이 더 편한데, 그 이유는 커스터마이징이 더 다양하게 가능하기 때문이다. 

필요하다면 30% 60% 값을 줄 수 있다. 

 

Transition

transform과 땔 수 없는 요소가 있는데 바로 transition이다. 

특정 요소의 변화를 애니메이션처럼 만들 수 있게 해주는 기능이다. transform 외 요소와도 함께 사용할 수 있다.

우선 사용 방법을 간단하게 보자면 다음과 같다. 

.transition {
  transition: 1s;
}

transition을 줬을 때와 주지 않았을 때를 바로 확인할 수 있다. 

적용된 css를 확인해보면 transition에 1s가 들어가 있고 해당 속성이 축약 속성이라는 것을 알 수 있다. 

아래로 내려보면 duration, timing-function, delay, property 같은 속성들이 있다. 

 

하나씩 살펴보면 다음과 같다 : 

 

transition-duration 

transition-duration: 1s;

변화가 실행되는 시간을 나타낸다. 1s를 주면 변화가 1초동안 변경되는 된다. 

 

transition-timing-function  

변화가 진행되는 속도를 설정할 수 있다. 기본 값은 ease 인데, 빠르게 진행되다가 천천히 마무리된다. 

외에도 동일한 속도로 진행되는 linear 등이 존재하고 이것 또한 우리가 커스텀을 할 수 있다. 

linear 옆에 아이콘을 누르면 다양한 템플릿 등을 확인할 수 있고 보라색 점을 움직여서 

커스텀으로 진행 속도를 변경할 수 있다. 

 

커졌다가 원래 사이즈로 돌아오는 띠요오오옹 한 애니메이션도 간단하게 구현할 수 있다. 

미리 테스트를 해보고 해당 코드를 사용할 수 있으므로 굳이 복잡한 계산은 우리가 할 필요가 없다. 

 

transition-delay

transition-delay: 1s;

변화가 바로 시작되지 않고 설정한 시간 이후에 실행되게 한다. 

 

transition-property

transition-property: all;

변화가 발생하는 요소를 설정할 수 있다. 

기본 값은 all이며, transform을 입력하면 transform만 다른 transition 속성이 적용되며 다른 요소들은 바로바로 변경이

발생한다. 

 

입력할 수 있는 요소는 transform 뿐만 아니라 width, height 값 등 속성의 이름을 넣으면  해당 요소에게 변경을 발생

시킬 수 있다.