/* 
https://freefrontend.com/css-flip-cards/   
  24 CSS Flip Cards

https://3dtransforms.desandro.com/cube
tutorial: 기초부터 상세설명 

https://jsfiddle.net/j08691/Z2jAt/
 cube 처리샘플: 간단하면서 막강하다 

https://codepen.io/Bjornros/pen/VPzQzB
내장 click 버튼에 의해 flip 

https://codepen.io/desandro/pen/LmWoWe
카드를  click 하면  flip 

https://codepen.io/mondal10/pen/WNNEvjV
카드를 click 하면 flip ==> 채택

https://freefrontend.com/bootstrap-lists/  예쁜 리스트들.
*/

/* =================================================================
<div class="flip-card">
  <div class="flip-card-inner">

	<div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:200px;height:200px;">
    </div>

	<div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>

  </div>
</div>

https://codepen.io/mondal10/pen/WNNEvjV

var cards = document.querySelectorAll('.card');
[...cards].forEach((card)=>{
  card.addEventListener( 'click', function() {
    card.classList.toggle('is-flipped');
  });
});
================================================================= */
.son-flipcard {
  background-color: transparent ;
  perspective     : 1000px      ;
}

.son-flipcard-inner {
  position   : relative ;
  width      : 100%     ;
  height     : 100%     ;
  text-align : center   ;
  transition : transform 0.5s;
  box-shadow : 0 3px 5px 0 rgba(0,0,0,0.2);
  transform-style: preserve-3d;
}

.son-flipcard-inner.is-flipped {
  transform: rotateY(180deg);
/* transform: translateX(-100%) rotateY(-180deg); */
}

/*
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
*/

.son-flipcard-front, .son-flipcard-back {
  position: absolute ;
  width   : 100%     ;
  height  : 100%     ;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.son-flipcard-back {
  transform: rotateY(180deg);
}

/* ---------------- for old program ---------------------- */
.son-flip { 
  perspective: 1100px;
}

.son-flip-inner {
  width: 100%; 
  height: 100%; 
  position: relative;
  transition: .4s;
  transform-style: preserve-3d;
}	

.son-flip-front, .son-flip-back {
  position: absolute;
  width: 100%; 
  height: 100%;
  backface-visibility: hidden;
}

.son-flip-front {
  background: white  ; 
}

/* 뒷면은 사전에 미리 뒤집기 */
.son-flip-back { 
  background: royalblue; 
  transform: rotateY(180deg);
}

/* 호버 시 뒤집기             */
.son-flip:hover .son-flip-inner {
  transform: rotateY(180deg);
}


/*--------------- OLD 자료 ----------------------- */

.flip_card {
  -webkit-perspective: 800;
  -ms-perspective    : 800;
  -moz-perspective   : 800;
  -o-perspective     : 800;
   width    : 320px;
   height   : 136px;
   position : relative;
   margin   : 9px auto;
}

.flip_card .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg)    ; /* IE 9 */
  -moz-transform:rotatey(-180deg)   ; /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg)     ; /* Opera */
}

.flip_card .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.4s;
}

.flip_card .card .side {
  width     : 100%       ;
  height    : 100%       ;
  padding   : 9px        ;
  cursor    : pointer    ;
  position  : absolute   ;
  box-sizing: border-box ;
  z-index   : 2          ;
  overflow  : auto       ;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);

  backface-visibility: hidden         ; /* W3C */
  -webkit-backface-visibility: hidden ; /* Safari & Chrome */
  -moz-backface-visibility: hidden    ; /* Firefox */
  -ms-backface-visibility: hidden     ; /* Internet Explorer */
  -o-backface-visibility: hidden      ; /* Opera */
}

.flip_card .card .back {
  background: white;
  color: black;
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg)     ; /* IE 9 */
  -moz-transform:rotatey(-180deg)    ; /* Firefox */
  -webkit-transform:rotatey(-180deg) ; /* Safari and Chrome */
  -o-transform:rotatey(-180deg)      ; /* Opera */
}

.flip_card .card .front {
  font-family: sans-serif;            /* Georgia; */
  font-size  : 1rem;
  text-align : center;
  line-height: 16px;
  border     : 3px solid white;
  color      : black ;
  background-color: white;            /* silver; */

}

.flip_card .card .back {
  background-color: #dbb2f9;
  border: 3px solid white;
  text-align: center;
  color: black;
  padding-top: 10px;
  font-family: sans-serif;            /* Georgia; */
  font-size: 1.1rem;
}

.zoom_kit {
    display:inline-block;
/*
    border:0;
    width:196px;
    height:210px;
*/
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   

}

.zoom_kit:hover {
    box-shadow: 0px 0px 8px #00ff00;      /* 0px 0px 30px #000000; */  
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.00);         /* 1.03 ==> 1.00 (2022-10-22) */
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.00);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.00);
    transition: all 200ms ease-in;
    transform: scale(1.00);
}


/*  https://codepen.io/wifeo/pen/qzwkb  */

.zoom_kit {
    display:inline-block;
/*
    border:0;
    width:196px;
    height:210px;
*/
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   

}

.zoom_kit:hover{
    box-shadow: 0px 0px 30px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.02);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.02);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.02);
    transition: all 200ms ease-in;
    transform: scale(1.02);
}