JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">

  <h1>Hover on the cards.</h1>
  
  
  <div class="stack-cards" style="width:20%;">
    
    <div class="stack-cards__rotation">
    
    
      <div class="stack-card stack-card_1" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/assets/home/game-0e307d71d9838e8fbe4927b551f119bcd9e4748f2c2b70c7b81846702996ef94.jpg')">

        <div class="card__content">

        </div>
      </div>


      <div class="stack-card stack-card_2" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/26/desktop_VALERIAN_BNP_68.jpg')">

        <div class="card__content">

        </div>
      </div>

      <div class="stack-card stack-card_3">
        
        <div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>
      <div class="stack-card__inside" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/50/desktop_guided_tour_2.jpg')">
        

        <div class="card__content">
        </div>
        </div>
      </div>
      
        </div>
        
    </div>

</div>

SCSS

.container {
  
}

.stack-cards {
  
  perspective: 500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  //perspective: 1000px;
  position: relative;
  background:#999;
  height: 0;
  padding-bottom:20%;
  //width:50%!important;
  //height:100%;
  
  
  &__rotation {
    width:100%;
    height: 100%;
    transform: rotateY(-18deg);
    transform-style: preserve-3d;
    perspective: 500px;
    position: absolute;
  }
  
  .stack-card {
    height:100%;
    //padding-bottom:75%;
    border-radius:12px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0.8;
    $xInitial: 55px;
    $xOffset: -45px;
    $zOffset: 20px;
    $rotOffset: 0deg;
    transition: all 1s ease;
    //overflow: hidden;
    transform-style: preserve-3d;
    background-size: cover;
    
    &__inside {
      position: absolute;
      height: 100%;
      width: 100%;
      background-size: cover;
      transition: all 0.4s ease;
      border-radius:12px;
    }
    
    &:hover {
      border: 1px white solid;
      opacity: 1;
      .stack-card__inside {
        //transform-style: preserve-3d;
        //transform: translate3d(20px, 0px, 0px);
      }
    }
    
    @for $i from 1 through 10 {

      &.stack-card_#{$i} {
        transform: translate3d(($xInitial + $xOffset * $i), 20px, ($zOffset * $i));
      }
    }
  }

}

JavaScript

VanillaTilt.init(document.querySelectorAll(".stack-cards"), {
	scale: 1.1,
  speed: 600,
  reverse: false,
  glare: true,
  'glare-prerender': true
  //max: 50,
  //axis:'Y'
});


document.body.addEventListener('click', function(e) {
	const el = e.target.closest('.stack-card');
  if (!el) return;
  
  const parentEl = el.parentElement;
 	const activeEl = parentEl.getElementsByClassName('stack-card_3')[0];
  
  const currentClassName = el.className;
  activeEl.className = currentClassName;
  el.className = 'stack-card stack-card_3';
  
  const glareEl = activeEl.getElementsByClassName('js-tilt-glare')[0];
  if (glareEl) {
  	el.append(glareEl);
  }
  
  
});