[HTML/CSS] 📚 transform

📋 기억하고 싶은 내용

• transform 속성을 사용한다고 해서 레이아웃 상에서 요소 자체가 변형되는 것은 아니다.
• 요소에 적용할 하나 이상의 CSS 변형 함수를 작성할 수 있다.

📌 크기 - scale

• 2D 만을 위한 transform-function이다.
• width, height 속성으로 요소의 크기를 조절하는 것과 염연히 다르다.
• scale() 함수로 요소의 크기를 시각적으로만 변경할 수 있고, 본연의 요소가 차지하는 공간은 그대로 존재한다.

📌 회전 - rotate

transform: rotate(45deg);

📌 이동 - translate

• 첫 번째 인자는 x축, 두 번째 인자는 y축을 의미한다.
• 한 개의 값만 작성하면 x축으로만 이동한다.
• percentage 자료형으로도 작성할 수 있다.

📌 기울이기 - skew

• 한 개의 값만 작성하면 x축으로만 기운다.
• 90deg 혹은 (45deg, 45deg)로 지정하면 완벽하게 기울기 때문에 눈에 보이지 않는다.

📌 기준점 - transform-origin

• 기본값은 center다.
• 기준점을 변경하면 최종 결과물이 완전히 바뀌어 버릴 수 있기 때문에 되도록이면 기본값을 유지하는 것이 좋다.
• 애니메이션 효과를 부여할 때는 유용하게 사용된다.

🔗 참고 래퍼런스

• transform - MDN
• <transform-function> - MDN
• <angle> - MDN
• translate() - MDN
• skew() - MDN
• transform-origin - MDN