css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다.
신기하죠?
그럼 바로 시작해볼까요?
1. transform
div:hover{ transform: rotate(45deg); }transform 기능을 이용해 도형을 회전시켜보겠습니다.
사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다.
div:hover{ 변형 : 회전 (45도) }
영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠.
2. 실제 적용
실제 적용된 코드로 애니메이션을 만들어봤습니다. 마우스를 올려보면서 확인해보시기 바랍니다.
[같이 보면 좋은 글]
[coding/html + css] - [css] transform을 이용해 뒤집는 애니메이션 만들기
[css] transform을 이용해 뒤집는 애니메이션 만들기
안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러
ssimplay.tistory.com
[coding/html + css] - css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!
css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!
css로도 약간의 애니메이션 효과를 넣을 수 있다는 사실 알고 계셨나요? transition을 이용하면 제이쿼리가 없어도 동적인 홈페이지를 만들 수 있답니다. 1. 예시 ① 사례 - 어떤 느낌인지 보여드리
ssimplay.tistory.com
그럼 이만.
총총.
'coding > html + css' 카테고리의 다른 글
| [css] 그림자를 넣어보자 box-shadow (8) | 2020.11.29 |
|---|---|
| [css] 테이블 테두리 한 줄로 만들어 보자 (22) | 2020.11.24 |
| [html] <!DOCTYPE html> 대충 이해해보기 (29) | 2020.10.03 |
| [html] html을 대충 이해해보자 (40) | 2020.09.29 |
| [css] css 속성 강제 적용하기 (우선 적용) (58) | 2020.09.17 |
