변형 속성
애니메이션을 적용할 때 사용하는 기능
종류
translate(X,Y) : 지정한 크기만큼 x축과 y 축으로 이동
translateX(X) : 지정한 크기만큼 x축으로 이동
translateY(Y) : 지정한 크기만큼 y 축으로 이동
scale(X,Y) : 지정한 크기만큼 x축과 y 축으로 확대 축소
scaleX(X) : 지정한 크기만큼 x축으로 확대 축소
scaleY(Y) : 지정한 크기만큼 y 축으로 확대 축소
rotate(각도)
skew(X,Y) : 지정한 크기만큼 x축과 y 축으로 왜곡
skewX(X) : 지정한 크기만큼 x축으로 왜곡
skewY(Y) : 지정한 크기만큼 y 축으로 왜곡
transform의 속성들은 고정점, 기준점이 (굳이 지정하지 않으면) 정중앙이 기준이 되는 경우가 많다.
이런 기준점을 변경하고 싶을 때 쓰는 것이 transform-origin속성이다.
키워드로 지정할 수도 있고 %로 값을 정할 수도 있다.
#base:hover #tire{
transform: translateX(400px) rotate(180deg) scale(1.5);
}
공백 : 자식태그일 때
'+'를 붙일 때 : 바로 뒤에 있는 태그
'~'를 붙일 때 : 뒤에 태그 중에서 찾으라는 뜻
앞에 있는 태그나 부모 태그는 안됨!!!
애니메이션 키프레임 : 움직인 또는 변화를 정의
from부터 to까지 움직임 또는 변화를 정의한다.
변화될 애니메이션의 변경요소를 change-bg라는 이름으로 정의
animation-name : 적용할 keyframe이름
animaiton-dutation : keyframe이 실행되는 시간
keyframe의 반복 횟수와 방향도 지정할 수 있다.
animation-iteration-count
: 애니메니션 반복 횟수, 숫자를 쓰면 그 횟수만큼 반복,
perspective는 입체감을 추가하는 속성으로 사용자와의 거리를 정의함으로써 transform에 입체감을 부여한다.
움직이는 .box에 적용하니 perspective 값이 잘 적용 안됨... body에 해야 입체감이 잘 느껴진다.
perspective는 숫자가 작을 수록 사용자와 가까워진다.
움직이는 대상을 관찰하는 기준에서 적용할 것
=> 즉 움직이고 있는 태그의 부모태그에 적용해야 입체감이 느껴진다.
perspective 속성은 관찰 대상이 여럿이기 때문에 부모/조상 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정.
transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정.(BUT 왠만하면 입체감이 안 느껴지는 듯)