移动卡片

创建一个在悬停时移动的卡片。

• 在.container元素上设置适当的perspective以实现移动效果。
• 为.card元素的transform属性添加过渡效果。
• 使用Document.querySelector()选择.card元素，并为mousemove和mouseout事件添加事件监听器。
• 使用Element.getBoundingClientRect()获取.card元素的x、y、width和height。
• 计算相对距离作为x和y轴上的值，范围为-1到1，并通过transform属性应用它。

<div class="container">
  <div class="shifting-card">
    <div class="content">
      <h3>卡片</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
    </div>
  </div>
</div>

.container {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  background: #f3f1fe;
}

.shifting-card {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 0.5rem;
  transition: transform 0.2s ease-out;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.shifting-card .content {
  text-align: center;
  margin: 2rem;
  line-height: 1.5;
  color: #101010;
}

const card = document.querySelector('.shifting-card');
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;

const handleMove = e => {
  const { pageX, pageY } = e;
  const dx = (cx - pageX) / (width / 2);
  const dy = (cy - pageY) / (height / 2);
  e.target.style.transform =
    `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
};

const handleOut = e => {
  e.target.style.transform = 'initial';
};

card.addEventListener('mousemove', handleMove);
card.addEventListener('mouseout', handleOut);

card.addEventListener('mousemove', handleMove); // 当鼠标在card元素上移动时，触发handleMove函数 card.addEventListener('mouseout', handleOut); // 当鼠标移出card元素时，触发handleOut函数