[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 속성의 변화 값을 일정한 시간동안 모션으로 전환 효과 줍니다.

http://easings.net/   

참고

Easing Functions Cheat Sheet

transition: 속성명 전환시간 가속도설정 지연시간;

/지연시간 생략가능/

/전환시간 단위는 s (세컨드) ms(미리세컨드)가 있고 1s=1000ms / 0.1s= 100ms/ 0.01s=10ms이다.  단위환산주의하자/

transition은 보통 가상 선택자 :hover를 이용해 마우스 호버시 변경된 css형태로의 전환 효과를 적용합니다. transition 구문의 위치는 변경 후인 :hover 부분이 아니라 변경이 일어나기 전인 원래의 태가 선택자입니다.