아이콘 회전
-
[CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS]웹 개발/소소한 팁, 버그 해결 2024. 3. 20. 02:00
완전 초 간단한 회전 애니메이션 .spin-object { animation: spin 5000ms infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } [CSS] icon 회전하기 / 태그 회전하기 CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-tran hotsunchip.tistory.com 위에서 설명한 아이콘 회전 + 크기..
-
[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; } 그리고 태그에 클래스를 추가해주면 아이콘이 45도 돌아간 것을 확인할 수 있다. 꼭 태그가 아니더라도, react icon, fontawesome, mui icon, remix icon 등의 (내부에서 태그로 렌더링 되는) 아이콘..