<CSS3> 3D예제 1 . Flip

* 완성 모습 *

 

 

 

 

 

< HTML 구조 >

 

 

 

1. 초기화

 

 

 

 

 

2. 기본크기, 가운데정렬하기.

 

 

 

 

 

 

3. position : absolute이용하여 두개의 동전 겹치기

 

 

( 뒷면이 뒤에서 나오기 때문에 앞으로 온다. )

 

 

 

*4. 뒤집으면 뒷면 나오게 하기*

 

위의 웹 화면을 옆에서 본다고 생각하고 과장해서 그렸을 때

( 파란색 : back (학그림), 빨간색:front (500) , 회색은 각 태그의 뒷면)

 

 

 

 

이 상태에서 맨 위를 덮고 있는 back을 뒤집는다

 

 

back이 뒷면을 보이고 있을 때 보이지 않게 한다면

-> front가 보인다.

 

 

 

반대로 뒤집혀 있을때도 마찬가지

 

 

 

즉, 맨 위의 back을 뒤집어 놓고 두 태그 모두 뒷면을 보일 때 hidden하게 하면 된다.

 

 

 

( back이 hidden하여 front가 보인다)

 

 

 

5. hover를 사용하여 마우스를 올리면 back이 보이게 하기 ( flip을 뒤집으면 된다)

과정이 보이는 효과를 위해 transition 이용

( flip이 아닌 li에 hover를 준 이유 : li가 너비와 높이가 있기 때문에 동전이 돌아가는 와중에 너미가 좁아져도 버벅되지 않는다)

 

 

 

 

 

: 뒤집어도 똑같이 front만 보인다.

-> flip을 3D 객체화

 

 

 

6. flip에 transform-style:preseve-3d, coin에  원근감.

 

* 동전이 원이라 원근감이 효과를 주진 못하지만 사각형 같은 도형의 경우에는 효과가 있다.