scale을 통해 상하좌우 반전 구현하기 (CSS)

scale에서 반전 효과 구현?!

기존에는 scale 속성을 사이즈를 확대/축소하는 역할로만 알고 있었다.

그러다 화살표 아이콘에 상하반전을 주어야 할 일이 생겨 구현 방안을 찾다가 scale 속성을 통해 쉽게 해결할 수 있다는 것을 알게 되었다.

scaleY 속성은 Y축 방향으로 요소를 확대하거나 축소하는데 사용된다.

하지만 음수 값을 지정하면 상하반전 효과가 발생한다.

다음과 같이 scaleY(-1), scaleY(1)을 사용하면 요소가 상하 반전된다.

transform: `scaleY(${isOpen ? -1 : 1})`,

scaleY이 상하 반전으로 동작하듯이 scaleX는 좌우 반전으로 동작한다.

transform: `scaleX(${isOpen ? -1 : 1})`,

참고 문서

• scale()