Transform

• 회전, 크기 조절, 기울이기 ,이동 효과등을 부여할 수 있다
• 함수를 작성해서 쓴다
• 함수를 한꺼번에 스페이싱으로 적용시키는 것도 가능하다
• 함수들을 작성하는 순서가 있다 (왼쪽 -> 오른쪽) 부터 적용

함수의 종류

scale

• 2D 만을 위해서 나온 것 , 3D는 사용 불가능하다
• 크기를 조절한다
• width 를 사용하는 것과 scale 을 사용하는 것 다르다

transform: scale(sx)
    
transform: scale(sx,sy)
   

rotate

• 값을 하나만 받을 수 있음 angle (자료형이다

transform: ratate(45deg) 
transform: ratate(0.25turn) 
/*둘다 45도 회전*/
    

translate

• 이동을 시킬 수 있다

transform: translate (200px) /* (200px,0) 을 입력한것과 동일 */
transform: translate(100px,150px)

transform: translateY (150px) 

-> y축으로만 150px 이동한 것

사진의 기준으로 50%,30%만 이동

transform: translateY (50%,30%)

skew

• 기울이기를 담당
• rotate와 비슷하게 각도를 사용
• 값을 하나만 입력하면 그 한쪽 방향으로만 이동한다

X기준으로 20도 움직인 형태

transform: skewX(20deg)

Y축 기준으로 20도 움직인 형태

transform: skewY20deg)

transform-origin

• transform과 별도의 프로퍼티로 사용한다
• 크기를 키우고 위치를 변경하는 기준점을 변경하는 것
• 기본값 initial 값이 50% -> 즉 center 이다
• 이것을 변경하는 것에 따라서 결과값이 엄청 달라진다

transform : scale (1.3);
transform-origin: left;

transform : rotate (45deg);
transform-origin: top left;

Transition

• 어느정도 시간의 흐름을 가지고 변환되는 상태를 보여주는 것
• 메뉴 버튼을 누르면 요소들이 출력된다던지 좀 더 다이나믹한 에니메이션 효과를 줄수있다

transition-property

-특정 요소만 선택하여 바꿀수 있는 것

• none : 아무것도 바꾸지않겠다는 키워드
• all : 가지고 있는것 모든 것을 바꾸겠다

transition-duration

• 얼마 만큼을 시간을 가지고 바꿀 것인지

background 의 색상을 2초간 바꾸겠다

transition-duration: 2s; ->(2000ms) 
transition-property : background-color;

transition-delay

• 트렌지션 되는것을 지연시키기 위함
• 요소들이 여러개 있을 때 트리거를 걸어서 순서대로 동작할 수 있도록

🚨 어떤 식으로 동작하는지 예시 잘 나와있음
https://developer.mozilla.org/ko/docs/Web/CSS/transition-delay

transition-timing-function

-트렌지션되는 중간과정의 시간을 조정할 수 있다

👌동작 샘플 확인하기!
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition

• 단축 요소 한줄에 적어서 사용하는게 대부분이다

• 순서가 중요하다 (duration 하고 delay 둘다 시간을 사용하기 때문!!)

• 될수 있으면 property, duration, delay, timing-function 이 순서 작성

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