[CSS]transform(3D변형)효과 주기
perspective: 원근감 설정하기
perspective: 원근감 수치;
perspective 수치가 낮을 수록 왜곡이 커지고 수치가 클수록 왜곡이 작아진다.
perspective 는 자식요소에 효과에 넣고싶을 때 부모에 속성시켜야한다. (3D 변형을 한 요소의 부모태그에 설정 해주는 것이 일반적입니다.)
translateZ : z축으로 이동하기
transform: translate(이동거리);
translateZ는 3D 공간에서의 z축, 즉 사용자가 브라우저를 바라보는 시점으로 기준으로 앞 또는 뒤로 움직입니다.
마이너스(-) 값은 사용자 시점을 기준으로 뒤쪽으로, 플러스(+) 값은 사용자 쪽으로 가깝게 이동합니다.
rotateX, rotateY
: 3D 공간상에서 x축과 y축기준으로 회전하기
transform: rotateX(x축 회전각도);
trasform: rotateY(y축 회전각도);
transition 속성
/animation과의 차이 : 애니메이션은 계속 지속적으로 효과가 나타남 트랜지션은 일시적으로 호버와같이 어떠한 행동을 취했을 때만 효과가 나타남
css 속성의 변화 값을 일정한 시간동안 모션으로 전환 효과 줍니다.
참고
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
easings.net
transition: 속성명 전환시간 가속도설정 지연시간;
/지연시간 생략가능/
/전환시간 단위는 s (세컨드) ms(미리세컨드)가 있고 1s=1000ms / 0.1s= 100ms/ 0.01s=10ms이다. 단위환산주의하자/
transition은 보통 가상 선택자 :hover를 이용해 마우스 호버시 변경된 css형태로의 전환 효과를 적용합니다. transition 구문의 위치는 변경 후인 :hover 부분이 아니라 변경이 일어나기 전인 원래의 태가 선택자입니다.