Tag feed

#transformation-matrix

3 posts0 followers

Explore Hashnode

Alternatives

고고라니드로koranidro.hashnode.devDec 28, 2024 · 3 min read

[TypeScript] 변환 원점 찾기

잠깐! transform에 대해 아직 잘 모른다면 [CSS] 변환 행렬을 먼저 읽어보세요! 상황에 따라 동적으로 뷰포트에 대한 transform-origin의 좌표를 구해야 할 수 있습니다. 대상이 변환이 수행되지 않은 경우라면 getBoundingClientRect를 사용해 쉽게 구할 수 있습니다. 하지만 변환이 수행된 경우는 생각보다 까다롭습니다. 차근차근 살펴보도록 하겠습니다. 우선 변환이 고려되지 않은 상황, 그중에서도 대상 영역에 대...

0

고고라니드로koranidro.hashnode.devDec 21, 2024 · 2 min read

[css] 변환 행렬 - 후편

이번 편은 이전 편으로부터 이어집니다. 전편에서는 transform의 원리와 주요 변환 행렬에 대해 소개했습니다. 이번 편에서는 이를 사용하면서 흔히 범할 수 있는 오류에 대해 다룹니다. 좌측에서 우측으로? 우측에서 좌측으로? transform: rotate(90deg) skewX(45deg); 어떻게 동작하실 것 같은가요? \(90^\circ\)를 뒤집었으니 사실상 회전하지 않은 거나 다름없을 테고 거기다 \(x\)축을 따라 \(45^\c...

0

고고라니드로koranidro.hashnode.devDec 14, 2024 · 3 min read

[css] 변환 행렬 - 전편

CSS에서는 요소의 이동이나 크기, 회전을 조절하기 위한 transform 속성이 있습니다. 이는 내부적으로 변환 행렬을 통해 처리합니다. 변환 행렬을 사용하면 요소의 변환을 비교적 간단하게 수행할 수 있습니다. 변환 행렬 변환 행렬이란 변환에 대한 행렬 표현입니다. 여기서 변환이란 함수라 생각해 주시면 됩니다. 즉, 함수의 행렬 표현 정도로 보시면 되겠네요. 행렬이 어떻게 함수의 역할을 할 수 있을까요? 함수가 무엇인가요? 기능 측면에서 접근...

0

#transformation-matrix

Search Hashnode

#transformation-matrix

Explore Hashnode

[TypeScript] 변환 원점 찾기

[css] 변환 행렬 - 후편

[css] 변환 행렬 - 전편

Trending tags this week