Transform & Transition

📍 Transform

HTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용한다.
사용법은 transform 속성 값으로 특수한 함수를 넣어주면 된다.

👾 transform 을 사용하려면 해당 요소의 display 속성이 block 또는 inline-block 이어야한다.

📌 transform 함수

• translate(tx, ty) : 지정한 크기만큼 x축, y축으로 이동한다.
• translateX(tx) : 지정한 크기만큼 x축으로 이동한다.
• translateY(ty) : 지정한 크기만큼 y축으로 이동한다.

🧷 예시

transform: translate(10px, 10px);

---

🧷 출력 (초록색 솔리드는 이동한 것을 잘 보이게 하기 위해 넣은 것)

• scale(sx, sy) : 지정한 크기만큼 x축, y축으로 확대 또는 축소한다.
• scaleX(sx) : 지정한 크기만큼 x축으로 확대 또는 축소한다.
• scaleY(sy) : 지정한 크기만큼 y축으로 확대 또는 축소한다.

🧷 예시

transform: scale(2, 0.5);

---

🧷 출력 (초록색 솔리드는 이동한 것을 잘 보이게 하기 위해 넣은 것)

• rotate(각도) : 지정한 각도만큼 회전한다.(+ 시계방향, - 반시계방향)
• rotateX(각도) : x축을 기준으로 회전한다.
• rotateY(각도) : y축을 기준으로 회전한다.
• rotateZ(각도) : z축을 기준으로 회전한다.
  -> 입체감을 표현하고 싶다면 perspective 속성을 부모요소에 적용해야한다.(rotate는 적용x)

🧷 예시

.box3 {
       transform: rotateX(45deg);
       /* 입체감을 주기 위해 부모태그에 속성 추가, 그냥 각도를 넣으면 회전처럼 느껴짐 */
       /* rotate 와 rotateZ 는 같은 결과를 줌 */
     }
.outline-box3 {
       perspective: 10px;
       /* 값이 적을 수록 가깝게 느껴짐(원근감을 줌) */
     }

---

🧷 출력 (초록색 솔리드는 이동한 것을 잘 보이게 하기 위해 넣은 것)

• skew(ax, ay) : 지정한 각도만큼 x축, y축으로 왜곡한다.
• skewX(ax) : 지정한 각도만큼 x축으로 왜곡한다.
• skewY(ay) : 지정한 각도만큼 y축으로 왜곡한다.

🧷 예시

transform: skew(15deg, 20deg);

---

🧷 출력 (초록색 솔리드는 이동한 것을 잘 보이게 하기 위해 넣은 것)

📍Transition

사전적의미는 "전환" 이라는 뜻이다.
CSS 에서 transition 은 속성 값이 변할 때 더욱 더 부드럽게 전환할 수 있도록 도와준다라고 보면 될 것 같다.

📌 transition 속성

• transition-property : 어떤 속성에 트랜지션 효과를 줄 것인지 지정한다.
  - <속성1>, <속성2> 와 같이 지정할 수 있다.
  • all : 모든 속성을 지정한다. ( all 은 생략가능)
  • none : 아무것도 지정하지 않는다.
• transition-duration : 트랜지션 효과를 몇 초 동안 실행할 것인지 지정한다.
• transition-delay : 지정한 초 만큼 기다렸다가 실행할 때 사용한다.
• transition-timing-function : 트랜지션이 시작하면서 끝날때의 타이밍!
  - 즉, 속도를 지정하는 것
  • linear : 트랜지션의 시작과 끝의 속도가 일정함
  • ease-in : 천천히 시작했다가 완료될 때 속도가 증가한다.
  • ease-out : 빨리 시작했다가 완료될 때 속도가 낮아진다.
    📂 MDN

transition-property: all;
/* 동작을 주고 싶은 부분, all 이라고 하면 모든 부분을 잡음 */
transition-duration: 1s;
/* 동작이 1 초 동안 실행됨 */
transition-delay: 0.5s;
/* 마우스를 올린지 0.5 초 뒤에 실행됨 */
transition-timing-function: ease-out;

• transition 단축속성으로 위 속성을 한꺼번에 표기할 수 있다.

  transition: 2s 1s ease-out;
  /* duration 2s , delay 1s , timing-function 을 의미, 모든 부분(hover 안의 내용)에 적용됨  */

📂 [transition MDN ](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)