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 w-50 m-auto">

    <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" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/50/desktop_guided_tour_2.jpg')">
      <div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>
      
      <div class="card__content">
        
      </div>
    </div>
    
    </div>
  test test test<br>
  test test test
</div>

SCSS

.container {
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  background: #fff;
}

.stack-cards {
  transform-style: preserve-3d;
  position: relative;
  //background:#999;
  height:0;
  padding-bottom: 30%;
  
  .stack-card {
    height:0;
    padding-bottom:75%;
    border-radius:12px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0.8;
    overflow: hidden;
    $xInitial: 25%;
    $xOffset: -15%;
    $zInitial: 50px;
    $zOffset: 20px;
    $yInitial: -10%;
    $rotOffset: -22deg;
    $scale: 0.5;
    transition: all 1s ease;
    background-size: cover;
    
    &:hover {
      border: 1px white solid;
      opacity: 1;
    }
    
    @for $i from 1 through 10 {

      &.stack-card_#{$i} {
        transform: translate3d(($xInitial + $xOffset * $i), $yInitial, ($zInitial + $zOffset * $i)) rotate3d(0, 1, 0, $rotOffset) scale($scale);
      }
    }
  }

}

JavaScript

VanillaTilt.init(document.querySelectorAll(".stack-cards"), {
	scale: 1.1,
  speed: 1000,
  reverse: false,
  glare: 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);
  }
  
  
});