Vanilla JS, CSS - 3D card

Just a card that animates on hover. Some nice CSS and some vanilla Js.

by Joakim Borg

HTML

<div class="container">
  <div class="card">
    <div class="product">
      <div class="circle"></div>
      <img src="https://iili.io/FaYZ42.md.png" alt="FaYZ42.md.png" border="0">
    </div>
    <div class="info">
      <h1 class="title">Blue Cap ZQ</h1>
      <h3>This cap will give you blue super powers!</h3>
      <h4>Pick a size:</h4>
      <div class="sizes">
        <button>50</button>
        <button>51</button>
        <button>52</button>
        <button class="active">55</button>
        <button>54</button>
      </div>
      <div class="purchase">
        <button class="add">Purchase</button>
      </div>
    </div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

$black: #000;
$white: #fff;
$lightblue: lightblue;
$darkblue: midnightblue;
$gray: #585858;
$radius: 30px;
$base-transition: all .5s ease-out;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  &.title {
    font-size: 2.5rem;
    transition: $base-transition;
  }
}

h3 {
  text-transform: uppercase;
  font-size: 1.3rem;
  padding: 1rem 0;
  color: $gray;
  font-weight: lighter;
  transition: $base-transition;
}

body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.container {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  //background: lightblue;
}

.card {
  height: 75vh;
  min-height: 550px;
  width: 20rem;
  box-shadow: 0 20px 20px rgba($black, 0.2), 0px 0px 50px rgba($black, 0.2);
  border-radius: $radius;
  padding: 0 2rem;
  transform-style: preserve-3d;
}

.product {
  min-height: 35vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  img {
    width: 10rem;
    z-index: 2;
    transition: $base-transition;
  }
  
  .circle {
    width: 9rem;
    height: 9rem;
    background: linear-gradient(
      to right, 
      rgba($darkblue, .4), 
      rgba($black, .4)
    );
    border-radius: 50%;
    position: absolute;
    z-index: 1;
  }
}

.sizes {
  display: flex;
  justify-content: space-between;
  transition: $base-transition;
  
  button {
    padding: .25rem .8rem;
    background: $white;
    border-radius: $radius;
    border: none;
    box-shadow: 0px 5px 10px rgba($black, .2);
    cursor: pointer;
    font-weight: bold;
    color: $gray;
    border: 2px solid $white;
    
    &:hover {
      background: $gray;
      color: $white;
      border: 2px solid $gray;
    }
    
    &.active {
      background: $gray;
      color: $white;
      border: 2px solid $gray;
      
      &:hover {
       ...

JavaScript

// Variables
const card = document.querySelector('.card');
const container = document.querySelector('.container');

const title = document.querySelector('.title');
const product = document.querySelector('.product img');
const purchase = document.querySelector('.purchase button');
const description = document.querySelector('.info h3');
const sizes = document.querySelector('.sizes');
const sizeHeader = document.querySelector('.info h4');

const translateBack = 'translateZ(0px)';
const translateOut = 'translateZ(100px)';
const devideAxis = 20;


// Moving animation
container.addEventListener('mousemove', e => {
  let xAxis = ~(window.innerWidth / 2 - e.pageX) / devideAxis;
  let yAxis = (window.innerHeight / 2 - e.pageY) / devideAxis;

  card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;

});

// Animate in
container.addEventListener('mouseenter', e => {
	card.style.transition = 'none';
  
  //Popout
  title.style.transform = translateOut;
  product.style.transform = 'translateZ(200px) rotate(-15deg)';
  product.style.width = '15rem';
  purchase.style.transform = translateOut;
  description.style.transform = translateOut;
  sizes.style.transform = translateOut;
  sizeHeader.style.transform = translateOut;
});

// Animate out
container.addEventListener('mouseleave', e => {
	card.style.transition = 'all .2s ease';
	card.style.transform = 'rotateY(0deg) rotateX(0deg)';
  
  //Popback
  title.style.transform = translateBack;
  product.style.transform = translateBack;
  product.style.width = '10rem';
  purchase.style.transform = translateBack;
  description.style.transform = translateBack;
  sizes.style.transform = translateBack;
  sizeHeader.style.transform = translateBack;
});