Как сделать подобный эффект (при наведении) без плагина?

Рейтинг: 0Ответов: 1Опубликовано: 17.07.2023

Как сделать tilt-эффект без плагинов и библиотек?

  if (jQuery().tilt) {
    $("[data-tilt]").tilt({
      perspective: 1000,
    });
  }
body {
  padding: 40px;
}

.elem {
      text-align: center;
    position: relative;
    color: var(--clr-white);
    background-color: rgba(var(--clr-dark-blue-rgb), 0.25);
    border: 1px solid red;
  border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 0.1rem;
}
<div data-tilt>
  <div class="elem">
    <p>12222222</p>
    <p>3333</p>
    <p>434</p>
    <p>55</p>
    <p>66</p>
  </div>
  
</div>
  <div data-tilt>
    <img src="https://amincodes.com/html/one-pages/flex-it/assets/images/about/1.png" alt="">
  </div>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.0.3/tilt.jquery.min.js"></script>

Песочница

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1

const el = document.querySelector('.block');

const angle = 20;

el.addEventListener('mousemove', function(event) {
  const rect = this.getBoundingClientRect();

  const half_w = rect.width / 2;

  const half_y = rect.height / 2;

  const x = (event.clientX - rect.left - half_w) / half_w;
  const y = (event.clientY - rect.top - half_y) / half_y;

  this.style.transform = `perspective(1000px) rotateX(${y * angle}deg) rotateY(${-x * angle}deg) scale3d(1,1,1)`;
});

el.addEventListener('mouseleave', function(event) {
  this.style.transform = '';
});
.block {
  display: flex;
  width: 100px;
  height: 100px;
  border: 1px solid aqua;
  border-radius: 8px;
  padding: 2em;
  will-change: transform;
  transform-origin: center;
  transition: all 0.3s ease-out
}
<div class="block">Text</div>