使用 Javascript 转换动画答案

【问题标题】：Transform animation with Javascript使用 Javascript 转换动画
【发布时间】：2021-11-07 14:38:31
【问题描述】：

我制作动画以响应 mousemove 事件侦听器，但框旋转原点似乎没有以中间框为中心，并且无法向左和顶部旋转/倾斜。

const box = document.querySelector('#box');
box.addEventListener('mousemove', function(event) {
    const middleX = this.clientWidth / 2;
    const middleY = this.clientHeight / 2;
         
    const layX = -(event.layerY / 7);
    const layY = (event.layerX / 7);

    this.style.transformOrigin = `${middleX}px ${middleY}px`;
    this.style.transform = `rotateX(${layX}deg) rotateY(${layY}deg)`;
});

* {
    margin: 50px;
    padding: 0;
}
.container {
    perspective: 1000px;
    background-color: rgb(105, 105, 105);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
}
#box {
    height: 200px;
    width: 200px;
    background-color: rgb(0, 255, 255);
    border-radius: 20%;
    transition: 0.3s ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation MouseMove</title>
    
</head>
<body>
    <div class="container">
        <div id="box"></div>
    </div>
</body>
</html>

它不能向左和向上旋转，只能向右和向下旋转。有谁知道如何让它向左或向上旋转/倾斜并使原点居中？

【问题讨论】：

不应该是const middleY = this.clientHeight / 2;吗？
盒子是方形的，但我会替换它

标签： javascript html dom dom-events addeventlistener

【解决方案1】：

尝试将transform-origin 更改为50%

transform-origin:50%;

【讨论】：

我把transform-origin: 50%放在CSS上，JS也不例外

【解决方案2】：

给你（如果下面的效果不满意你也可以使用vanilla-tilt js）：

const box = document.querySelector(".box");
const container = document.querySelector(".container");

let sensitivity = 5;
container.addEventListener("mousemove", (event) => {
  let osX = (window.innerWidth / 2 - event.pageX) / sensitivity ;
  let osY = (window.innerHeight / 2 - event.pageY) / sensitivity ;
  box.style.transform = `rotateY(${osX}deg) rotateX(${osY}deg)`;
});

body{
  height: 100vh;
  display:flex;
  align-items: center;
  justify-content:center;
  flex-direction: column;
  perspective: 1000px;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  display:flex;
  align-items: center;
  justify-content:center;
  background: blue;
  width: 800px;
  height: 800px;
  
}
.box{
border: 5px solid yellow;
  transform-origin: center;
  width: 200px;
  height: 200px;
  background: red;
  transform-style: preserve-3d;
  display:flex;
  align-items: center;
  justify-content:center;
  color: #fff;
  font-family: verdana;
  border-radius: 20%;
}

<div class="container">
  <div class="box">
    Hello World!
  <div>
</div>

【讨论】：

啊，我明白了，我只是错误地计算了旋转。谢谢