title: 3D animations using CSS and Javascript
body: <p>On Steam there is a game called Dota 2. They had this section of "cards" that showed the characters you play. When you hover over the card, there is a really cool animation. The card lifts up and pivots towards the mouse pointer.</p>
  
  <p>Pictures are attached. The red dot represents where the mouse is hovering:</p>
  
  <p>Bottom-left:
  <a href="https://i.stack.imgur.com/58Tbv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/58Tbv.png" alt="enter image description here"></a></p>
  
  <p>Center: 
  <a href="https://i.stack.imgur.com/vXh1G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vXh1G.png" alt="enter image description here"></a></p>
  
  <p>Left-center:
  <a href="https://i.stack.imgur.com/BsJLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BsJLb.png" alt="enter image description here"></a></p>
  
  <p>Currently, I have a basic version here: <a href="https://codepen.io/riza-khan/pen/mdyvEeg" rel="nofollow noreferrer">https://codepen.io/riza-khan/pen/mdyvEeg</a> but the animation isn't working as intended.</p>
  
  <p>I will also post the code at the end of this question should Codepen links not be allowed on Stackoverflow. Some of the code is redundant, but I kept it in there to gain more insight. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const container = document.querySelector('.container')
  const card = document.querySelector('.card')
  let x = document.querySelector('.x-axis')
  let y = document.querySelector('.y-axis')
  
  container.addEventListener('mousemove', (e) =&gt; {
    let xCoords = e.offsetX
    let yCoords = e.offsetY
  
    x.innerHTML = `xCoords:${xCoords}`
    y.innerHTML = `yCoords:${yCoords}`
  
    card.style.transform = `rotateY(${yCoords}deg) rotateX(${xCoords}deg) scale(1.1)`
  })  
  
  container.addEventListener('mouseout', (e) =&gt; {
    card.style.transform = `rotateY(0deg) rotateX(0deg) scale(1)`
  })
  
  container.addEventListener('click', (e) =&gt; {
    console.log(e)
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    display: flex;
    height: 90vh;
    background: grey;
  }
  
  .x-axis,
  .y-axis {
    position: absolute;
  }
  
  .y-axis {
    left:100px;
  }
  
  .container {
    margin: auto;
  }
  
  .card {  
    height: 500px;
    width: 300px;  
    border-radius: 10px;  
    overflow: hidden;
    transition: all 1s ease;  
    box-shadow: 10px 8px 20px -20px black;
  
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .container:hover  {
  
    .card {        
      transform-style: preserve-3d;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="x-axis"&gt;&lt;/p&gt;
  &lt;p class="y-axis"&gt;&lt;/p&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="card"&gt;
      &lt;img src="https://vignette.wikia.nocookie.net/wowwiki/images/d/d9/Illidan.png/revision/latest?cb=20140503134345" alt=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>