[CSS] 특정 요소를 시계방향, 반시계방향으로 돌리는 방법.rotate

문제 발생

워드프레스 테마를 직접 만들어서 사용하다보니 여러가지 실험적인 것 들을 해보고 있는데, 이모지를 사용하면서 내가 딱 원하는 모양이 없을 때가 있었습니다.

예를 들어서 ⤴️ 이런 이모지가 있는데, 제가 딱 원하는 방향을 가리키는게 아니지만, 이걸 시계방향으로 90도 돌리면 딱 제가 원하는 방향을 가리키는게 되거든요.

그래서 찾아보니 CSS 를 이용해 특정 요소를 돌리는 방법이 있었습니다.

transform

해결방법은 간단했습니다. 해당 이모지의 transform 속성에 rotate 로 값을 넣어 주면 됩니다. 예를 들어서,

[HTML]
<span class="emoji">⤴️</span>

[CSS]
.emoji { display: inline-block; transform: rotate(90deg); }

이렇게 설정해주는 것이죠.

기본적으로 transform 속성이 어떤 요소의 모양을 바꿔 주는 속성임을 그 이름에서도 알 수있고, 여기에 rotate 값으로 90deg, 즉, 시계방향 기준 90도 돌리라고 값을 넣어주니 딱 원하는 모양이 나왔습니다. 간단하죠?

주의사항

• rotate 값은 그 요소의 display 속성이 block 또는 inline-block, 아니면 그에 준하는 값을 가지고 있어야 작동합니다. 위 예제에서도 span 태그는 inline 이기 때문에 display 속성을 따로 inline-block 으로 설정한 것입니다.
• rotate 한 요소를 margin 이나 line-height 로 위치를 잡고 싶다면, 여러 번 시행 착오를 거쳐서 위치를 잡아야 할 것입니다. margin 이나 line-height 가 일단 rotate 되지 않았을 때에 반영되었다가 rotate 하는 것이기 때문에 생각한 것과 다른 결과가 나올 것입니다. 이건 직접 해보면 느낄 수 있는 부분입니다.
• rotate에는 위 예제에 있는 deg 단위 뿐만 아니라, turn, rad 등 다양한 단위로 값을 넣을 수 있습니다만, 저는 deg(말 그대로 각도)가 가장 직관적이었습니다.

끝.