JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="card">
  <img
    src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgied0v0dgsgyqeoh7804b0ca54buj0qd.jpg"
  />
</div>

CSS

body {
  margin: 0;
  border-radius: 16px;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.card {
  display: block;
  border-radius: inherit;
  overflow: hidden;
  height: 370px;
  width: 592px;
  transition: transform 0.1s;
  transform: perspective(400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

img {
  border-radius: inherit;
  height: 100%;
  width: 100%;
}

JavaScript

// https://juejin.cn/post/7394073179484110848

const card = document.querySelector(".card")
const img = document.querySelector("img")

// range: 最大的幅度，value：当前鼠标的位置，maxValue: 鼠标所在方向图片长度
const RANGE = [-5, 5]
const getRotate = (value, maxValue) => {
  return (value / maxValue) * (RANGE[1] - RANGE[0]) + RANGE[0]
}

const offsetWidth = card.offsetWidth
const offsetHeight = card.offsetHeight

card.addEventListener("mousemove", (e) => {
  const { offsetX, offsetY } = e
  console.log(offsetX)
  const rx = -getRotate(offsetY, offsetHeight)
  const ry = getRotate(offsetX, offsetWidth)
  card.style.setProperty("--rx", `${rx}deg`)
  card.style.setProperty("--ry", `${ry}deg`)
})

card.addEventListener("mouseleave", (e) => {
  card.style.setProperty("--rx", `0deg`)
  card.style.setProperty("--ry", `0deg`)
})