원근법, 겹친 다음 뒤에 있는 요소 가리기

perspective: 600px;

원근법. 실제로 입체적인 느낌임. 예를 들어

.medal:hover .front{transform: rotateY(-180deg);}

.medal .back{transform: rotateY(-180deg); width: 200px; height: 200px;}

.medal .back .btn{position: absolute; top: 100px; left: 0;right: 0; margin: auto;}

.medal:hover .back{transform: rotateY(0deg);}

이렇게 Y축으로 돌릴때 실제 3d 오브젝트 돌리는 느낌.

 

만약 perspective 안주면 rotateY는 그냥 줄어들었다 펴지는거고, 주면 실제로 돌려버리는 그런 느낌..? 그런 거..?

 

backface-visibility: hidden;

 이렇게 하면 뒤에 있는 요소 아무리 커도 가릴 수 있음. 형제 요소.

 

translateZ() z축은 perspective  이거 줘야 할 수 있음.

 

 

  <div id="wrap">

    <div class="inner">

      <div class="card">

        <div class="front">

          aaaa

        </div>

        <div class="back">

          bbbb

        </div>

      </div>

    </div>

  </div>

 

 

.card{width: 300px; height: 400px; position: relative; transition: .5s; perspective: 600px;}

.card .front{width: 100%; height: 100%; position: absolute; background-color: aqua; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; transition: .5s; transform: rotateY(0);}

.card .back{width: 100%; height: 100%; position: absolute; background-color: green; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; transition: .5s; transform: rotateY(-180deg);}

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

.card:hover .back{transform: rotateY(0deg);}