[CSS] CSS3 이용하기 02 (170410)

CSS3 이용하기 02 

• 3D Transform

- perspective :컨텐츠와 내 시선 사이의 거리 (wrapper 요소)

- perspective-origin: 50% 50% ; 시선의 위치 결정 (wrapper 요소)

- transform-style : preserve-3d ; 3d transform을 하겠다고 선언

- transform-origin : 50% 0%; x, y, z축이 만나는 원점 설정 (x% y%)

** 출력 결과 **

• CSS3를 이용한 카드 뒤집기 

** 출력 결과 **

• 버튼 클릭하면 뒤집어지는 카드
  

** 출력 결과 **