transform-origin 이란?

transform-origin

transform 과 함께 쓰이는 CSS 이다. transform 이 발생하는 기준점 위치를 정한다.

 

 

transform-origin: 50% 25%

 

transform-origin: 100% 100%

 

transform-origin: 0 0;

 

 

 

백문이 불여일견 이제 한번 돌려보자.
파란색 사각형에 hover 하면 rotate 된다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

그래서 이걸 어디 써먹나?

transform-origin , transform: rotate , overflow:hidden 을 잘 사용하면 저렇게 뽀족한 UI 를 만들 수 있다.