CSS - [ 3D 애니메이션 (요소 뒤집기) ]

마우스를 올리면 요소가 뒤집히고 뒤에 있는 요소의 내용이 출력되도록 3D 애니메이션을 설정해보자.

 

 

 

우선 Html에 아래와 같이 앞면을 나타낼 요소와, 마우스를 올리면 나타날 뒷면을 나타낼 요소를 만들어준다.

 

 

CSS에서 우선 요소를 감싸고 있는 container에 가로 세로 너비를 지정해주고(뒤에서 container에 hover 가상 선택자를 주고 container에 마우스를 올리면 3D 애니메이션 효과가 나타나도록 할건데, block 요소이므로 너비를 지정해주지 않으면 item의 범위 밖에서도 마우스를 올리면 효과가 나타나버림!), 원근감을 느낄 수 있도록 perspective 속성을 준다.

그리고 item에는 크기를 지정해주고 border-box로 box-sizing을 변경 후 요소가 뒤집혔을 때 뒷면이 보이지 않도록 backface-visibility에 hidden 값을 준다. 뒤집히는 효과를 볼 수 있도록 transition에 지속시간 1s 값을 준다.

 

 

그리고 front 요소에 position absolute값을 줘서 front와 back 요소가 겹치도록 해주고, 원래 상태 즉 회전율이 0도임을 명시해주기 위해 rotateY(0deg) 값을 준다. 그리고 container에 마우스가 올라가면 회전할 수 있도록 rotateY(180deg) 값을 준다.

back 요소에는 원래 뒤집혀있는 상태가 되도록 rotateY(-180deg) 값을 주고, container에 마우스가 올라가면 뒤집히도록 rotateY(0deg) 값을 준다.

 

 

---

스타벅스 클론 코딩에 사용한 3D 애니메이션 코드를 살펴보자.

 

html코드를 보면 medal 클래스( container ) 안에 front, back 클래스 ( item )를 넣어놨다. 내용은 텍스트 대신 이미지를 넣어놓았다.

 

그리고 CSS를 살펴보면 우선 medal에 가로 너비, 세로 너비를 지정하고 원근감을 위해 perspective 속성을 주었다.

front와 back 의 공통 속성으로 가로 세로 너비를 medal과 똑같이 주고, 요소가 겹치도록 position absolute값, 뒤집혔을때 내용이 보이지 않도록 backface-visibility hidden 값, 전환 효과가 보일 수 있도록 지속 시간을 1s로 주었다.

그리고 각각 요소에 회전율을 명시해주었다. 

 

 

 

 

확인해보면 처음엔 front 요소가 출력되고 있고

마우스를 올리면 front 요소가 뒤집히고 back 요소의 내용이 잘 나타난다!

 

---