3D卡hover在React Js中的效果

Question

我正在尝试在 React 中创建 3D 卡 hover 效果，但 hover 的行为不同于普通 javascript。

我无法弄清楚为什么行为与相同的逻辑不同。

普通 Javascript 演示： https://codepen.io/markmiro/pen/wbqMPa

<div class="card">
  3D Card
  <div class="glow" />
</div>

* {
  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);
}

.card {
  font-weight: bold;
  padding: 1em;
  text-align: right;
  color: #181a1a;
  
  width:  300px;
  height: 400px;
  box-shadow: 0 1px 5px #00000099;
  
  border-radius: 10px;
  background-image: url(https://images.unsplash.com/photo-1557672199-6e8c8b2b8fff?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80);
  background-size: cover;
  
  position: relative;
  
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}

.card:hover {
  transition-duration: 150ms;
  box-shadow: 0 5px 20px 5px #00000044;
}

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

const $card = document.querySelector('.card');
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
    )
  `;
  
 console.log(center.y / 100) ;$card.querySelector('.glow').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 = '';
});

反应实现： https://stackblitz.com/edit/react-eghmd8

我已经用queryselectors挂钩更改了所有查询选择器。

Answer 1

似乎这个属性perspective: 1500px需要添加到组件的 output 容器才能工作。

带有修复的分叉实例： stackblitz

在 style.css 中创建一个style.css ：

.app {
  perspective: 1500px;
}

在App.js中，将className添加到 output 容器中：

  // 👇 Add the class here
  return (
    <div className="app">
      <div
        ref={inputRef}
        className="card"
        onMouseLeave={removeListener}
        onMouseMove={rotateToMouse}
      >
        3D Card
        <div ref={glowRef} className="glow" />
      </div>
    </div>
  );

可能还有其他问题需要解决，但希望这仍然可以作为参考。