1. 변형(trasform)
- transform : translate()
=> x,y축 방향이나 양쪽 방향으로 이동할 거리를 지정해 해당 요소를 지정한 크기만큼 이동 시킨다.
- trasform : scale()
=> 지정한 크기만큼 확대/축소가 가능하다. - trasform : rotate()
=> 지정한 각도만큼 웹 요소를 시계방향이나 반대 방향으로 회전시긴다. - trasform : skew()
=> 2차원 변형만 가능하며 지정한 각도만큼 비틀어 왜곡시킨다. - trasform-origin속성
=> trasform속성은 x,y,z축을 기준으로 변형했다면, origin태그는 특정 지점을 변형의 기준으로 설정할 수 있다.
2. 트랜지션(transition)
트랜지션은 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것을 말한다. 예를 들면 마우스를 올리면 네모였던 것이 원형으로 바뀌는 것처럼
-
trasition-property속성
=>트랜지션을 어느 속성에 적용할 것인지 선택하는 것이다. 선택하지 않을 경우 모든 속성이 트랜지션 대상이 된다.
(all, none, <속성이름>) -
transition-duration속성
=> 트랜지션 진행 시간을 지정한다. -
trasition-timing-function속성
- linear : 시작부터 끝까지 똑같은 속도로 트랜지션을 진행한다.
- ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다.(기본값)
- ease-in : 시작을 느리게 한다.
- ease-out : 느리게 끝낸다.
- ease-in-out : 느리게 시작하고, 느리게 끝낸다.
- transtion-delay속성
=> 지연 시간을 설정한다. 트랜지션이 언제부터 시작할 것인지를 설정한다.
