[Section 02] CSS 3D #2

CSS 3D

🔮 CSS 3D #2

마우스를 위에 올리면 카드가 돌아가는 것 처럼 보이게 하기

See the Pen final by sohnsookyoung (@sohnsookyoung) on CodePen.

여기서 처음 .card의 transform을 0도로 굳이 안해놓아도 되지만 해놓는 것이 좋다고 한다. 움직일 준비를 시킨다. => 성능에 도움을 준다.

🔮 앞 뒤 다른 카드 만들기

See the Pen Untitled by sohnsookyoung (@sohnsookyoung) on CodePen.

📍 설명

• html 기존에는 카드 클래스를 3개를 만들었다면 해당 카드 클래스 안에 앞과 뒤에 해당하는 카드를 만들어준다. .card-side를 통해서 공통 스타일을 적용시키고 앞과 뒤에 각각 해당하는 스타일은 .card-side-front, .card-side-back을 통해서 적용시킬 수 있다.

• css

  • 카드를 겹치는 방법
    카드 컨테이너 클래스인 .card에서는 position: relative; 를 통해서 .card를 기준으로 배치가 되도록 하고, .card-side에서 부모 요소를 기준으로 배치시키기 위해서 position: absolute; 를 사용한다. 그렇게 된다면 앞장과 뒷장 모두 left: 0, top: 0에 위치하므로 카드가 겹치게 된다.

    See the Pen first by sohnsookyoung (@sohnsookyoung) on CodePen.

  • 마우스를 올리면 카드 뒷장이 보이게 하기
    

    1. 지금 .world의 자식 요소에만 3d가 적용되고 있는 상태이므로 card-side-front, card-side-back 모두 3d가 유지되도록 하기 위해서 .card-side에도 마찬가디로 .world의 3d가 유지되도록 transform-style: preserve-3d; 을 사용한다.
    2. 마우스를 위로 올렸을 때, 뒷 장이 보이도록 하기 위해서 backface-visibility: hidden; 을 사용한다.

    See the Pen second by sohnsookyoung (@sohnsookyoung) on CodePen.

  • 문처럼 열리고 닫히는 것 처럼 만들기
    transform-origin: left; 을 사용해서 회전 중심이 왼쪽이 되도록 하고, 앞쪽으로 열리는 것 처럼 하기 위해서 마우스를 올렸을 때 돌아가는 각도를 -180deg 로 한다.

    See the Pen final by sohnsookyoung (@sohnsookyoung) on CodePen.

  </p>