** 선택자:hover → 마우스 커서를 선택자에 갖다댔을 때
선택자:active → 마우스 커서로 선택자를 클릭했을 때
1. 태그를 이동시키기
: translate 함수를 사용하여 설정 태그를 이동시킨다.
① transform: translate(px); : x축과 y축을 지정 px 만큼 이동시킨다.
② transform: translateX(px); : x축을 지정 px만큼 이동시킨다.
③ transform: translateY(px); : y축을 지정 px만큼 이동시킨다.
2. 태그를 확대/축소시키기
① transform: scale(비율); : x축과 y축을 비율 만큼 확대/축소시킨다.
② transform: scaleX(비율); : x축을 비율 만큼 확대/축소시킨다.
③ transform: scaleY(비율); : y축을 비율 만큼 확대/축소시킨다.
3. 태그를 기울이기
① transform: skew(deg, deg); : x축과 y축을 비율 만큼 확대/축소시킨다.
② transform: skewX(deg); : x축을 비율 만큼 확대/축소시킨다.
③ transform: skewY(deg); : y축을 비율 만큼 확대/축소시킨다.
4. 트랜지션을 적용시키기
: 트랜지션 속성에 의해 태그가 변형될 때 부드럽게 변형되게끔 한다.
① transition-property: 적용할 속성; : 변형시킬 속성들을 입력한다.
② transition-duration: 지속시간(s); : 변형을 지속시킬 시간을 입력한다.
③ transition-timing-function: linear/ease/ease in/ease out/ease-in-out;
- linear: 균일한 속도로 움직인다.
- ease: 느리게 시작해서 초반에 빠르게 가다 끝에서 느리게 움직인다.
- ease in: 점점 빠르게 움직인다.
- ease out: 점점 느리게 움직인다.
- ease-in-out: 시작 지점과 종료 지점에서 느리게 움직인다.
④ transition-delay: 지연시간(s); : 지연시간 만큼 트랜지션을 지연시킨다.
⑤ transition: 모든 속성;