Karty v2

by Petr Haluza

HTML

<div class="karta">
	<span>Já jsem karta</span>
  <div class="lesk"></div>
</div><!-- /card -->

CSS

* { box-sizing: border-box;}
html, body { width: 100%; height: 100%;  display: flex;  justify-content: center;  align-items: center;}
body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(white, #efefef);}

.karta { padding: 1em; width: 200px; height: 300px; border-radius: 10px;
  box-shadow: 0 1px 5px #00000099;
  
  
  background: url(https://images.unsplash.com/photo-1557672199-6e8c8b2b8fff?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80) center center / 100%;
  
  position: relative;
  
  transition-duration: 300ms;
  transition-property: transform, background, box-shadow ;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}

.karta:hover { transition-duration: 200ms; box-shadow: 0 5px 20px 5px #00000044; background-size: 110%}

.karta .lesk { position: absolute; width: 100%; height: 100%; left: 0; top: 0;  
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);}

JavaScript

const $card = document.querySelector('.karta');
let bounds;

function rotateToMouse(e) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  const leftX = mouseX - bounds.x;
  const topY = mouseY - bounds.y;
  const center = {
    x: leftX - bounds.width / 2,
    y: topY - bounds.height / 2
  }
  const distance = Math.sqrt(center.x**2 + center.y**2);
  
  $card.style.transform = `
    scale3d(1.07, 1.07, 1.07)
    rotate3d(
      ${center.y / 100},
      ${-center.x / 100},
      0,
      ${Math.log(distance)* 2}deg
    )
  `;
  
  $card.querySelector('.lesk').style.backgroundImage = `
    radial-gradient(
      circle at
      ${center.x * 2 + bounds.width/2}px
      ${center.y * 2 + bounds.height/2}px,
      #ffffff55,
      #0000000f
    )
  `;
}

$card.addEventListener('mouseenter', () => {
  bounds = $card.getBoundingClientRect();
  document.addEventListener('mousemove', rotateToMouse);
});

$card.addEventListener('mouseleave', () => {
  document.removeEventListener('mousemove', rotateToMouse);
  $card.style.transform = '';
  $card.style.background = '';
});