목차
변형(transform) & 트랜지션(transition)
ex) 마우스를 요소 위로 가져갈 경우 회전하게 하는 등의 효과
![[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)](https://blog.kakaocdn.net/dn/J1aw0/btrSqjAD1KS/a2BLBESI4DuZlBwm21FsiK/img.png "[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)")
이 경우 요소위로 마우스를 가져갈 경우 바로 회전하기 때문에 투박스러움
위의 이미지를 좀 더 부드러운 에니메이션 효과를 주기위해서 아래와 같이 트랜지션 적용
![[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)](https://blog.kakaocdn.net/dn/dFiTvg/btrSs0fohg2/HKqavB7MvXfBakNnVZppY0/img.png "[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)")
출처 :
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#%ED%9A%8C%EC%A0%84
![[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)](https://t1.daumcdn.net/keditor/emoticon/friends1/large/025.gif "[CSS]css 변형(transform) & 트랜지션(transition) - undefined - 변형(transform) & 트랜지션(transition)")
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS]CSS table display (0) | 2022.11.30 |
|---|---|
| [CSS]css 선택자 결합 & 복잡한 선택자 사용법 (0) | 2022.11.30 |
| [CSS] 티스토리 블로그 스킨 편집_글꼴(폰트) 바꾸는 방법 (2) | 2021.12.22 |
| [비즈니스] 아웃룩 자주쓰는 메일 서식 저장하기 (0) | 2021.12.07 |
| [CSS] html+css 활용 예제 풀기(2021-10-26) (0) | 2021.11.25 |
댓글