[CSS] 웹페이지의 요소를 좌우, 상하 반전 시키는 방법, transform

folder 프로그래밍 calendar_month 2026.05.14 web_traffic 0

웹사이트를 만들 때 구글 폰트에 있는 머터리얼 아이콘을 아주 유용하게 잘 쓰고 있습니다.

문제

그런데 아래와 같은 List Arrow 라는 아이콘이 있는데,

저는 이 아이콘과 함께 화살표가 반대로 올라가고 있는 아이콘을 사용하고 싶었는데, 아무리 찾아 봐도 올라가는 아이콘은 없더라구요?

그래서 생각해보니, 이 아이콘을 좌우 반전 시켜서 180도 회전 시키면 화살표가 왼쪽에 위치하고 올라가는 방향을 가리키는 아이콘이 된다는 것을 알았습니다. 이 정도는 CSS에서 아주 간단하게 컨트롤 가능하죠.

.icon { transform: scaleX(-1) rotate(180deg); }

CSS 에서 transform 속성을 이용해 좌우 반전을 시키고(scaleX(-1)), 180도 돌려주는(rotate(180deg)) 것입니다.

생각보다 간단하죠?

아니 그런데.. 곰곰이 생각을 해보니..

scaleX(-1) 가 좌우 반전이라면.. scaleY(-1)는 상하 반전이라는 이야기잖아요. 그래서 실제로 scaleY(-1)를 적용해보니,

아주 잘 작동합니다.

그냥 상하 반전을 하면 되는데 굳이 좌우 반전해서 180도 돌리고 할 필요가 없던거죠.

상황에 맞게, 필요에 따라 잘 응용해서 사용하시면 되겠습니다.

transform 속성은 해당 요소에 크기가 있어야 작동하는 속성이기 때문에 span 태그와 같이 inline 형식의 요소에는 작동하지 않습니다.

따라서 어떤 요소에 transform 속성을 적용하고 싶다면 꼭, display: inline-block 과 같이 실제 크기를 가지는 요소로 설정해줘야 잘 작동함을 잊지 맙시다.

끝.