고라니드로의 블로그

고라니드로의 블로그

#transform

Articles tagged with #transform

[TypeScript] 변환 원점 찾기
잠깐! transform에 대해 아직 잘 모른다면 [CSS] 변환 행렬을 먼저 읽어보세요! 상황에 따라 동적으로 뷰포트에 대한 transform-origin의 좌표를 구해야 할 수 있습니다. 대상이 변환이 수행되지 않은 경우라면 getBoundingClientRect를 사용해 쉽게 구할 수 있습니다. 하지만 변환이 수행된 경우는 생각보다 까다롭습니다. 차근차근 살펴보도록 하겠습니다. 우선 변환이 고려되지 않은 상황, 그중에서도 대상 영역에 대...
Dec 28, 20243 min read14
[css] 변환 행렬 - 후편
이번 편은 이전 편으로부터 이어집니다. 전편에서는 transform의 원리와 주요 변환 행렬에 대해 소개했습니다. 이번 편에서는 이를 사용하면서 흔히 범할 수 있는 오류에 대해 다룹니다. 좌측에서 우측으로? 우측에서 좌측으로? transform: rotate(90deg) skewX(45deg); 어떻게 동작하실 것 같은가요? \(90^\circ\)를 뒤집었으니 사실상 회전하지 않은 거나 다름없을 테고 거기다 \(x\)축을 따라 \(45^\c...
Dec 21, 20242 min read15
[css] 변환 행렬 - 전편
CSS에서는 요소의 이동이나 크기, 회전을 조절하기 위한 transform 속성이 있습니다. 이는 내부적으로 변환 행렬을 통해 처리합니다. 변환 행렬을 사용하면 요소의 변환을 비교적 간단하게 수행할 수 있습니다. 변환 행렬 변환 행렬이란 변환에 대한 행렬 표현입니다. 여기서 변환이란 함수라 생각해 주시면 됩니다. 즉, 함수의 행렬 표현 정도로 보시면 되겠네요. 행렬이 어떻게 함수의 역할을 할 수 있을까요? 함수가 무엇인가요? 기능 측면에서 접근...
Dec 14, 20243 min read14