[css] 카드 뒤집기 만들어보기

카드를 뒤집어 앞뒤가 보이는형태를 만들어보자.

<div class="world">
    <div class="card">
      <div class="card-side card-side-front">F</div>
      <div class="card-side card-side-back">B</div>
    </div>
  </div>

.world {
    width: 60vw;
    height: 60vh;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
  }

기본적으로 배경을 만들어주고 내용물을 중앙정렬해준다.
입체적인 효과를위해 perspective를 넣어 준다.

 .card {
   position: relative;
   width: 100px;
   height: 150px;
   transition: 1s;
   transform: rotateY(0deg);
 }

앞뒤 카드를 감싸고있는 .card 를 position relative 와
가로세로 크기를 주고 transition을 주고 형식상 transform: rotateY(0deg); 를 넣어준다.

.card-side {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }
  .card-side-front {
    z-index: 1;
    background-color: #fff;
  }
  .card-side-back {
    background-color: red;
    transform: rotateY(180deg);
  }

앞쪽으로 보여질카드에 z-index:1 을 주고
앞뒤 카드에 구별을 위해 색을 다르게 주고 공통으로 position:absolute와 flex로 중앙정렬을 해준다. 뒤로보여질 카드부분은 미리 Y축 180도 돌려놔준다.

.world:hover .card {
    transform: rotateY(-180deg);
  }

배경을hover 했을때 카드를 돌려주는데 오류가 생긴다.
world에만 transform이 적용되어 안쪽 컨텐츠에는 영향이 안간다.

  .card {
    position: relative;
    width: 100px;
    height: 150px;
    transition: 1s;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
  }

이때 안쪽 컨텐츠인 .card 에 transform-style: preserve-3d; 를 넣어준다.

  .card-side {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    backface-visibility: hidden;
  }

공통 카드에 backface-visibility: hidden; 를 주어 카드 뒷부분을 가려준다.

 .card {
    position: relative;
    width: 100px;
    height: 150px;
    transition: 1s;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transform-origin: left;
  }

transform-origin 를 이용해 축을 이용하여 다른느낌을 줄 수 있다.

All view

.world {
   width: 60vw;
   height: 60vh;
   background-color: yellow;
   display: flex;
   align-items: center;
   justify-content: center;
   perspective: 600px;
 }

 .card {
   position: relative;
   width: 100px;
   height: 150px;
   transition: 1s;
   transform: rotateY(0deg);
   transform-style: preserve-3d;
   transform-origin: left;
 }

 .world:hover .card {
   transform: rotateY(-180deg);
 }

 .card-side {
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   backface-visibility: hidden;
 }
 .card-side-front {
   z-index: 1;
   background-color: #fff;
 }
 .card-side-back {
   background-color: red;
   transform: rotateY(180deg);
 }

<div class="world">
   <div class="card">
     <div class="card-side card-side-front">F</div>
     <div class="card-side card-side-back">B</div>
   </div>
 </div>