[내일배움캠프] 6기 노.벤져스 팀 과제 팀 소개 사이트 -1-

-카드 뒤집기-

카드에 커서를 갖다가 대면 뒤집히면서 또 다른 내용이 나온다.

 

카드를 뒤집기 위해서는 총 4개의 div가 필요했다.

CSS

.flip-box {

      width: 300px;

      height: 500px;

      margin: auto;

    }

    .flip {

      width: 100%;

      height: 100%;

      position: relative;

      color: white;

      text-align: center;

      line-height: 400px;

      transform-style: preserve-3d;

       transition: 0.5s;

    }

    .front,

    .back {

      width: 100%;

      height: 100%;

      position: absolute;

      backface-visibility: hidden;

    }

    .front {

      background: skyblue;

    }

    .back {

      background: orange;

      transform: rotateY(180deg);

    }

    .flip-box:hover .flip {

      transform: rotateY(-180deg);

    }

HTML

<div class="flip-box">

        <div  class="flip">

          <div class="front">

            <div class="col">

              <div c lass="card">

                <img src="https://ca.slack-edge.com/T043597JK8V-U055SUCRHHQ-49b15a072ec3-512" class="card-img-top"

                  height="300px" />

                <div class="card-body" style="height: 200px;">

                  <h2 id="name" style="color:black">정영훈</h2>

                  <h5 id="position" style="color:black">팀장</h5>

                  <h6 id="comment" style="color:red">Comment</h6>

                </div>

              </div>

            </div>

          </div>

          <div class="back">

            <div class="col">

              <h3 style="color:blueviolet">ESTJ</h3>

              <h2 style="color:black">Self-Introduce</h2>

            </div>

          </div>

        </div>

      </div>

 

1. flip-box로 뒤집히길 원하는 div의 영역을 결정한다.

2. flip으로 transform-style: preserve-3d;  로 3D 공간묘사 효과를 부여한다.

3 .front,.back{backface-visibility:hidden;}로 각 카드의 앞면과 뒷면이 뒤집혔을 때의 모습을 가린다.

4.transform: rotateY(180deg) 는 요소가 반대로 뒤집힌다는 뜻이다.

5.front와back 을 지정한다.

6. .flip-box:hover .flip { transform: rotateY(-180deg); } 로 커서가 카드를 향하면 뒤집히는 효과를 준다.