CSS 3D:perspective - 카드 뒤집기 효과

perspective 속성은 원근감을 통해 대상을 입체적으로 보이게 표현한다.   

사용법 -  3D로 표현할 요소의 부모 요소에 perspective: 숫자값px; 라는 속성을 사용한다.

여기서 perspective값의 크기는 사용자와 대상 요소와의 거리감을 나타낸다고 생각하면 된다.

즉, 값이 크면 좀 더 멀리서 떨어져서 보는 것 같은 느낌.

값이 작으면 가까이서 보는 느낌을 준다. 즉 가까우면 3D 효과가 더 극적으로 나타나고, 값이 크면 좀 더 자연스럽게 나타난다고 생각하면 된다. 

perspective 속성을 준 부모와 타겟 요소 사이에 다른 요소들이 존재하는 상황이라면, 그 각각의 요소들에

transform-style: preserve-3d 를 적용해 줘야한다. 

 

See the Pen 카드 뒤집기 by volt-nuna (@ddonni0426) on CodePen.