.sampleCard {
perspective: 500px;
touch-action: pinch-zoom;
}
.face {
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
transition: rotate 0.2s var(--ease-out-cubic);
}
const cardElement = document.querySelector(".sampleCard");
const faceElement = cardElement.querySelector(".face");
const { width, height } = cardElement.getBoundingClientRect();
// カードの傾きの最大値（度）
const maxTilt = 20;
// カードの傾きを更新
const updateCardTilt = (x, y) => {
faceElement.style.rotate = `${-y} ${x} 0 ${maxTilt}deg`;
};
cardElement.addEventListener("pointermove", (event) => {
// 要素の幅と高さと位置を取得
const { width, height, left, top } = cardElement.getBoundingClientRect();
// 要素の中心位置を算出
const centerX = width / 2;
const centerY = height / 2;
// ポインターのカードの中心からの位置を算出
const offsetX = event.clientX - left;
const offsetY = event.clientY - top;
// ポインターのカードの中心からの度合い
const x = (offsetX - centerX) / centerX;
const y = (offsetY - centerY) / centerY;
updateCardTilt(x, y);
});
// ポインターがカードから離れたらもとに戻す
cardElement.addEventListener("pointerleave", () => {
updateCardTilt(0, 0);
});