使用 Javascript 转换动画
Posted
技术标签:
【中文标题】使用 Javascript 转换动画【英文标题】：Transform animation with 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 = `$middleXpx $middleYpx`;
this.style.transform = `rotateX($layXdeg) rotateY($layYdeg)`;
);*
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;吗？
盒子是方形的，但我会替换它
【参考方案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($osXdeg) rotateX($osYdeg)`;
);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>【讨论】：
啊，我明白了，我只是错误地计算了旋转。谢谢以上是关于使用 Javascript 转换动画的主要内容，如果未能解决你的问题，请参考以下文章
使用 javascript 为 CSS3 转换的值设置动画是不是会排除硬件加速？
是否可以在 python 中将包含 JavaScript 图表的 html 文件转换为 PDF？