✅transform

• 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
• transform은 css 시각적 서식 모델의 좌표 공간을 변경한다.
• 크기조절은 실제로 크기가 작아지는 것은 아니다.

1) scale

• 요소의 화면에 보여지는 크기 조절을 한다.
• 소수점도 사용이 가능하다.
• scale은 0 ~ 1의 값만 사용 가능하다.

만약 0.5라고 하면 가로는 절반 세로는 절반
사이즈는 그대로인데 실제로 화면에 보여지는거는 절반이다.

transform : scale(0.5, 0.5);

// x축만 0.5
transform : scaleX(0.5)

// y축만 0.5
transform : scaleY(0.5)

2) rotate

• 요소를 회전하여 돌릴 수 있다.

// 45각도로 회전한다.
rotate(45deg) 

// 거꾸로 45도를 회전한다.
rotate(-45deg) 

// 요소를 1바퀴 돌린다. 360도와 같음.
rotate(1turn)

// 요소를 0.25바퀴 돌린다.
rotate(0.25turn)

3) translate

• 요소를 적용값만큼 이동을 시킨다.

translate는 값을 한개만 입력하면 x축만 적용이 된다. 따라서 x, y둘 다 적용할 때는 값을 두개를 입력해야 한다.

// x축으로 25px만큼 이동한다.
transform : translateX(25px);

// y축으로 25px만큼 이동한다.
transform : translateY(25px);

// x축을 25px만큼 y축을 100px만큼 이동한다.
transform : translate(25px, 100px);

4) skew

• 요소를 기울이는 효과를 적용한다.
• 각도(deg)를 사용한다.

skew도 값을 하나만 입력하면 x축만 적용이 된다. x축, y축 둘 다 적용하기 위해서는 값을 두개 입력해야한다.

transform : skewX(20deg);

transform : skewY(20deg);

transform : skew(20deg, 30deg);

5) origin

• 꼭짓점에 기준을 잡는다.
• 기울기, 이동 등 transform에 각 function들을 사용했는데 origin은 별도로 사용한다.
• transform-origin

// 좌측 상단 꼭짓점이 기준이 된다.
transform-origin : top left

✅transition

• translation은 A라는 상태가 있고 B라는 상태가 있을 때, A에서 B로 변환되는 모습을 보여주는 속성이다.
• translation은 시간에 대한 개념이 들어간다.

1) transition-property

• 변환할 속성 지정한다.
• 변환될 때 어느정도 시간에 흐름을 가진다.
• 기본값은 none이다.

특정 css를 바꾸고 싶다 하면 아래와 같이 작성하면 된다.

// background-color만 변경하겠다.
transition-property : barckground-color

// 전체 css를 변경하겠다
transition-property : all

2) transition-duration

• 변환될 때 얼마나 걸리는지 시간을 지정한다.

// 전환되는 시간 1초
transition-duration : 1s 

transition-duration : 500ms 

3) transition-delay

• transition을 지연 시키는 속성이다.
• 전환이 되는 시작 시간을 지연 시킨다고 해석해도 된다.
• 여러개에 적용할 때 delay 시간을 다 다르게 해서 도미노처럼 사용할 수 있다.

transition-delay : 2s;

4) transition-timing-function

• 모양이 변환되는 시간을 지정한다.
• 쉽게 설명하면 그래프 모양이 천천히 변하다가 중간지점부터 빠르게 변하는 느낌이다.

// 일정한 속도로
transition-timing-function : linear;

// 전환 효과가 천천히 시작된다.
transition-timing-function : ease-in;

// 전환 효과가 천천히 끝난다.
transition-timing-function : ease-out;

// 전환 효과가 천천히 시작되어, 천천히 끝난다.
transition-timing-function : ease-in-out;

5) transition shorthand(단축속성)

• transition에서 사용한 속성들을 한번에 적용할 수 있는 단축속성이다.

시간을 사용하는 속성이 두개가 있어 시간 속성을 한개만 사용하면 무조건 duration이 적용된다.

transition : property, duration, timing-function, delay

// 모든 요소를 1초동안 진행되고 전환이 천천히 시작된다.
transition : all, 1s, ease-in;

✅ transform과 transition을 합쳐서 사용