카드 HTML/CSS/JS (transform 인터랙션)

 

화질구지 ... 죄송합니다.

 

카드 CSS/JS를 활용하여 뒤집는 인터랙션을 준 모습입니다. 구현코드는 아래와 같습니다.

 

부트스트랩/제이쿼리 연동하셔야 정상작동합니다.

부트스트랩 / 제이쿼리

HTML / CSS / JAVASCRIPT를 사용하였습니다.

 

HTML / BOOTSTRAP

<!-- 좌우 -->
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section id="widgets-Statistics">
                <div class="container col-xl-2 col-md-4 col-sm-6">
                    <div class="card card-y">
                        <div class="front">
                            <div class="badge-circle badge-circle-lg badge-circle-light-info mx-auto my-1">
                                <i class="bx bx-edit-alt font-medium-5"></i>
                            </div>
                            <p class="front-title text-muted mb-0 line-ellipsis">Front</p>
                        </div>
                        <div class="back">
                            <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto my-1">
                                <i class="bx bx-message font-medium-5"></i>
                            </div>
                            <p class="back-title text-muted mb-0 line-ellipsis">Back</p>
                        </div>
                    </div>
                </div> 
            </section>
        </div>
    </div>
</div>

<!-- 상하 -->
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section id="widgets-Statistics mb-4">
                <div class="container col-xl-2 col-md-4 col-sm-6">
                    <div class="card card-x">
                        <div class="front">
                            <div class="badge-circle badge-circle-lg badge-circle-light-info mx-auto my-1">
                                <i class="bx bx-edit-alt font-medium-5"></i>
                            </div>
                            <p class="front-title text-muted mb-0 line-ellipsis">Front</p>
                        </div>
                        <div class="back-x">
                            <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto my-1">
                                <i class="bx bx-message font-medium-5"></i>
                            </div>
                            <p class="back-title text-muted mb-0 line-ellipsis">Back</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

 

CSS

    #body{
        font-family: '나눔스퀘어라운드';
    }
    #main_user_id{
        display: none;
    }
    .container {
    perspective: 1000px;
    height: 110px;
  }
    .card {
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .back{
    transform: rotateY(180deg);
  }
  .back-x{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateX(180deg);
  }
  .front-title, .back-title{
      display: flex;
      align-items: flex-end;
      justify-content: center;
  }
  .on{
      transform: rotateY(180deg);
  }
  .off{
    transform: rotateY(0);
  }

  .on-x{
      transform: rotateX(180deg);
  }
  .off-x{
    transform: rotateX(0);
  }

 

 

JS / JQUERY

    // 좌우
    $(document).ready(function(){
        $('.card-y').click(function(){
            if($(this).hasClass('on')){
                $(this).addClass('off').removeClass('on');
            }else{
                $(this).addClass('on').removeClass('off');
            }
        })
    // 상하
        $('.card-x').click(function(){
            if($(this).hasClass('on-x')){
                $(this).addClass('off-x').removeClass('on-x');
            }else{
                $(this).addClass('on-x').removeClass('off-x');
            }
        })
    });

TOGGLE를 활용해도 되지만 다른 JS떄문에 충돌로 인해 위와같이 구현하였습니다.

 

부트스트랩/제이쿼리 연동하셔야 정상작동합니다.