HTML_transform

▶️ transform 관련 CSS 속성들

  .box {
    transform : rotate(10deg); 
    transform : translate(10px, 20px);
    transform : scale(2);
    transform : skew(30deg);

    /*transform 두개 이상을 한꺼번에 쓰려면*/
    transform : rotate(10deg) translateX(30px);
  }

• transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다. 본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다.
• rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 입니다. 특히 애니메이션을 동작시킬 때 transform 속성을 쓰면 효과적이다.

---

▶️ @keyframe

@keyframes move{
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

@keyframes는 커스텀 애니메이션을 정의하기 위한 틀이자 공간이라고 생각하면 된다.

---

▶️ 애니메이션 세부조정하기

  .box:hover {
    animation-name : move; /*keyframe 명*/
    animation-duration : 1s; /*동작 시간*/
    animation-timing-function : linear; /*베지어 주기*/
    animation-delay : 1s; /*시작 전 딜레이*/
    animation-iteration-count : 3; /*몇회 반복할것인가*/
    animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
    animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
  }

margin, width, left 보다 transform을 쓰는 것이 브라우저 성능에 더 효율적이다.

---

▶️ 성능 잡는 깨알팁들

  .box {
    will-change: transform;
  } 

애니메이션을 주는 .box가 약간 느리게 동작한다면 will-change : 애니메이션줄속성;을 사용한다. 이는 바뀔 내용을 미리 렌더링해주는 속성이다.

  .box {
    transform: translate3d(0, 0, 0);
  }

• 애니메이션이 너무 많아 CPU만으로 전부 연산이 불가능하다면 GPU의 도움을 받을 수도 있다. ransform : translate3d를 쓰면 3D 이동도 가능한데 이 속성의 경우 GPU를 사용해서 연산하게 된다.
• 그래서 translate3d(0, 0, 0) 이런 식으로 아무데도 움직이지 않는 3D 이동명령을 주고 뒤에 필요한 transform을 더 적용해주면 GPU를 이용한 속성 연산이 가능하다.

---