[CSS] 3D 카드 효과(transform, perspective)

 

사이트를 제작하면서 한 가지 난관에 부딪혔다.

첫번째 움짤과 같이 트랜스폼(Transform)으로 3D 카드 효과를 만들려고 했다.

하지만 두번째 움짤처럼 3D 효과가 적용되지 않고 평면적으로 카드가 넘어가버렸다.

 

바람직한 3D 카드 효과

 

부적절한 3D 카드 효과

 

여기에 적용된 코드는 아래와 같다.

 

<div class="team_profile_wrapper">
  <div class="team_profile_content">
    <div class="item_wrapper">
      <div class="item_container item_container_front">
        <h1>FAKER</h1>
      </div>
      <div class="item_container item_container_back">
        <h1>FAKER</h1>
        <p>SANGHYEOK LEE - 미드</br>MAY 7, 1996 - SOUTH KOREA</p>
        <p class="color_highlight">자기소개</p>
        <p>FAKER IS ONE OF JUST TWO PLAYERS, ALONG WITH HIS FORMER TEAMMATE BENGI, TO HAVE WON THE LEAGUE OF
          LEGENDS
          WORLD CHAMPIONSHIP THREE TIMES.</p>
      </div>
    </div>
  </div>
</div>

body {
  background-color: #000;
  margin-top: 100px;
}

.team_profile_wrapper {
  max-width: 980px;
  margin: 0 auto 30px;
}

.team_profile_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.team_profile_content .item_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  max-width: calc(50% - 20px);
  -webkit-box-flex: 1;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  margin: 5px 10px;
}

.team_profile_content .item_wrapper>div {
  position: absolute;
  width: 100%;
  height: 300px;
  background: #fff;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.team_profile_content .item_wrapper .item_container_front {
  position: relative;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  z-index: 2;
}

.team_profile_content .item_wrapper .item_container_front h1 {
  font-family: 'Purista';
  height: 70%;
  color: #E2012D;
  font-size: 72px;
  text-align: center;
  line-height: 300px;
  letter-spacing: -2px;
  -webkit-transform: scale(0.8, 1);
  transform: scale(0.8, 1);
  margin: 0;
}

.team_profile_content .item_wrapper .item_container_back {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.team_profile_content .item_wrapper .item_container_back h1 {
  font-family: 'Purista';
  color: #E2012D;
}

.team_profile_content .item_wrapper .item_container_back .color_highlight {
  color: #E2012D;
  font-weight: 700;
}

.team_profile_content .item_wrapper .item_container_back p {
  font-size: 14px;
  letter-spacing: -.3px;
}

  // TEAMS CARD CLICK
  CardClick();
  function CardClick() {
    let ClickNum = 0;
    $('.team_profile_content .item_wrapper > div').on('click', function () {
      if(ClickNum == 0) {
        $(this).css({
          position: 'absolute',
          transform: 'rotateY(180deg)'
        });
        $(this).siblings('.item_container').css({
          position: 'relative',
          transform: 'rotateY(0)'
        });
        ClickNum++;
      } else {
        $(this).css({
          position: 'absolute',
          transform: 'rotateY(-180deg)'
        });
        $(this).siblings('.item_container').css({
          position: 'relative',
          transform: 'rotateY(0)'
        });
        ClickNum--;
      }
    });
  }

 

 

좌우로 넘어가는 카드 효과를 만드는데 핵심이 되는 코드는 transform: rotateY와 backface-visibility: hidden 이다.

transform: rotateY(0);
transform: rotateY(180deg);
transform: rotateY(-180deg);

backface-visibility: hidden;

 

클릭하면 rotateY가 180 또는 -180이 되고 뒷부분은 hidden 되어 반대쪽 카드가 보이게 된다.

 

그리고 3D 효과를 위해 transform-style: preserve-3d 를 넣었지만 제대로 적용되지 않았다.

찾아본 결과 원인은 부모 요소에 perspective 를 추가하지 않았기 때문이다.

perspective는 깊이감을 표현하는 속성으로 Z축의 변화를 보여준다.

값이 낮을수록 가까이에서 보는 느낌을 주는데 즉, 3D 효과가 더 부각된다.

 

따라서 이 문제는 부모 요소(item_wrapper)에 perspective 속성을 추가하면 해결된다.

 

 

perspective: 100px

 

perspective: 500px

 

 

perspective: 1000px