-
[CSS] icon 회전하기 / <i> 태그 회전하기 [Tailwind CSS]웹 개발/소소한 팁, 버그 해결 2024. 3. 20. 01:49
CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다.
결론만 말하면, 아래의 속성을 추가해준다.
.rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; }
그리고 <i> 태그에 클래스를 추가해주면 아이콘이 45도 돌아간 것을 확인할 수 있다.
<i class="rotate-45"></i>
꼭 <i> 태그가 아니더라도, react icon, fontawesome, mui icon, remix icon 등의 (내부에서 <i> 태그로 렌더링 되는) 아이콘 컴포넌트에도 모두 적용된다.
이를 응용하면 아래와 같이 회전하는 아이콘도 쉽게 만들 수 있다.
끗~
'웹 개발 > 소소한 팁, 버그 해결' 카테고리의 다른 글
[CSS] 아이콘 / 텍스트에 그라데이션(Gradient) 추가 [Tailwind CSS] (0) 2024.03.20 [CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS] (0) 2024.03.20 [Typescript] TypeError: Webpack imported module is not a function 해결 (0) 2024.03.20 [Next.js 14] 버튼 동시에 눌리는 현상 막기 [stopPropagation][Typescript] (0) 2024.03.20 [Typescript] 제네릭(Generic) 메서드 작성 (0) 2024.03.20