<div class="product-card-container">
  <div class="product-card">
    <div class="info-icon-container">
      <div class="info-icon">
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
      </div>
<!--      <p>Customize</p> -->
    </div>
    
    <div class="header">
      <h1>Headphones</h1>
      <button>Add To Bag <i class="fa fa-shopping-bag"></i></button>
      <em>$70.00</em>
    </div> <!-- end of header -->
    <div class="product-img">
      <img src="https://goo.gl/HfpFyP" alt="" />
    </div>
    <div class="bg-img">
      <img src="https://goo.gl/U7XMDL" alt="" />
    </div>
    
  </div> <!-- end of product-card -->
</div><!-- end of product-card-container -->

<!-- <p class="coords"></p>
<p class="coords-2"></p> -->

*,
*:before,
*:after {
  box-sizing: border-box;
}

$ease: ease;

body {
  font-family: montserrat;
  perspective: 1000px;
  transform-style: preserve-3d;
  background: #eee;
}

.product-card-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 850px;
  
  .product-card {
    width: 25em;
    height: 25em;
    background: #ccc;
    position: relative;
    padding: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
    &:after {
      content: "";
      width: 100%;
      height: 10px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      bottom: -60px;
      box-shadow: 0 20px 20px rgba(0,0,0,.3);
    }
    .info-icon-container {
      $long-W: 30px;
      $short-W: 20px;
      $line-margin: 10px;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      margin: 1em 1em;
      z-index: 3;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateZ(20px);
      &:hover {
        .info-icon {
          .bar-1 {
            width: #{$long-W * 1.5};
          }
          .bar-2 {
            width: #{$long-W * 1.2};
          }
          .bar-3 {
            width: #{$long-W };
          }
        } 
      }
      .info-icon {
        cursor: pointer;
        position: relative;
        background: red;
        
        .bar-1, 
        .bar-2, 
        .bar-3 {
          background: white;
          //width: $short-W;
          height: 1px;
          transition: all .4s $ease;
        }
        
        .bar-2 {
          width: $long-W;
        }
        
        .bar-1,
        .bar-3 {
          width: $short-W;
          position: absolute;
        }
        
        .bar-1 {
          top: $line-margin;
        }
        
        .bar-3 {
          bottom: $line-margin;
        }
      }
      p {
        font-size: .8rem;
        font-weight: 300;
        letter-spacing: .2rem;
        margin-left: $long-W;
        
      }
    }
    
    &::before {
        content: "";
        background: rgba(0,0,0,.8);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
      }
    .header {
      display: flex;
      flex-direction: column;
      z-index: 2;
      position: relative;
      color: white;
      
      h1 {
        font-size: 2em;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 1rem;
        transform: translateZ(50px);
      }
      button {
        color: white;
        border-radius: 50px;
        border: 1px solid white;
        background: rgba(0,0,0,0);
        width: 15em;
        height: 3em;
        margin: 0 auto;
        text-transform: uppercase;
        letter-spacing: .15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-bottom: 1rem;
        transition: all .3s ease-in-out;
        transform: translateZ(10px);
        &:hover {
          transform: translateZ(100px);
          background: white;
          color: black;
        }
        &:focus {
          outline: none;
        }
        .fa-shopping-bag {
          margin-left: 1rem;
          transform: translateZ(50px);
        }
      }
      em {
        font-style: italic;
        text-align: center;
        font-weight: 300;
        transform: translateZ(20px);
      }
    }
    .product-img {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: -5rem;
      z-index: 3;
      transition: all .3s ease-in-out;
      perspective: 850px;
      transform: translateZ(40px);
      img {
        width: 15em;
        filter: drop-shadow(0px 5px 5px rgba(black, .5));
      }
      &:after {
        content: "";
        width: 100%;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        bottom: -10px;
        //box-shadow: 0 20px 20px rgba(0,0,0,.3);
      }
    }
    .bg-img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      img {
        width: 25em;
        z-index: 1;
      }
    }
    
  }
}

.coords, .coords-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 1rem;
}

.coords-2 {
  margin-bottom: 2rem;
}

const card = $('.product-card'),
      coord = $('.coords'),
      coord2 = $('.coords-2')

$(document).on('mousemove', function(e) {
  let ax = -($(window).innerWidth()/2 - e.pageX)/20,
      ay = ($(window).innerHeight()/2 - e.pageY)/20
  card.css({
    transform: `rotateY(${ax}deg) rotateX(${ay}deg)`
  });
  // coord.text(`ax: ${ax}, ay: ${ay}`)
  coord.text(`half x: ${-($(window).innerWidth()/2 - e.pageX)}`)
  coord2.text(`pageX: ${e.pageX}, pageY: ${e.pageY}`)
})