CSS 애니메이션 : Transforms

Translation

in flow 위치에서의 이동. 

해당 요소의 이동이 grid, flex 타 요소 배치에 영향주지 않음.

 

픽셀

  transform: translate(0px, 20px);

% : 원래 자신의 크기

transform과 left의 차이점

<style>
  .relative.box {
    position: relative;
    left: 50%;
  }
  .transform.box {
    transform: translateX(50%);
  }
</style>

<div class="wrapper">
  <div class="relative box"></div>
  <div class="transform box"></div>
</div>

자기 크기와 px 응용

---

Scale

배수를 나타내는 단위없는 값

텍스트도 커짐

좌우따로

너비나 높이 수정 시 모든 요소들의 위치를 계산해서 다 변경해야함.
transform은 대상만 움직이고 확대하기에 성능에 좋음

---



Rotate

시계 방향으로 돌림

degree : 회전 각도

turn : 회전 수

---

Skew

거의 안씀. 대각선 레이아웃 만들 때나 씀 : https://9elements.com/blog/pure-css-diagonal-layouts/

디폴트 X축. Y축 가능

---

Transform origin

Transform 함수가 실행되는 앵커인 원점이 있습니다.

해당 점은 피벗 포인트 역할을 합니다!

(origin과 해당 엘리먼트의 각 점 간 거리가 중요함)

(%는 역시 자신의 사이즈)

디폴트는 센터임

원점에서 원래 요소까지와의 거리가 동일하게 스케일 됨

---

다양한 연산 조합하기

여러 변환 함수를 공백으로 구분하여 함께 묶을 수 있습니다.

순서가 중요합니다. transform 함수는 순차적으로 적용됩니다. 순서를 반대로 하면 어떻게 되는지 확인하세요.

 

변환 함수는 함수형 프로그래밍의 합성처럼 오른쪽에서 왼쪽으로 적용됩니다.

 

---

인라인 요소

Flow 레이아웃의 inline 요소에는 동작하지 않습니다.

인라인 요소는 문서 흐름과 함께 간다는 것을 기억하새요.

그들의 목표는 가능한 한 혼란을 최소화하면서 일부 콘텐츠를 감싸는 것입니다.

display: inline-block을 사용하거나
다른 레이아웃 모드(예: Flexbox 또는 Grid)를 사용하도록 전환하세요

---

Dialog

• 대화 상자는 뷰포트 중앙에 있어야 합니다.
• 닫기 버튼은 마치 울타리에 앉은 새처럼, 모달 위 대화 상자 바로 바깥에 있어야 합니다.

<div class="dialog-wrapper">
  <div class="dialog-content">
    <button class="close-btn">
      Close
    </button>
  </div>
</div>

<style>
    .dialog-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: hsl(0deg 0% 0% / 0.75);
      display: grid;
      place-content: center;
    }

    .dialog-content {
      width: 600px;
      max-width: 100%;
      height: 400px;
      background: white;
      border-radius: 6px;

      position: relative;
    }

    .close-btn {
      padding: 16px;
      background: transparent;
      border: none;
      font-weight: bold;
      position: absolute;
      top: 0;
      right: 0;
      transform: translateY(-100%);
      color: white;
    }
</style>

---

참고 

https://courses.joshwcomeau.com/css-for-js/08-animations/01-transforms

Transforms • CSS for JavaScript Developers