我制作了影片來回應mousemove事件監聽器，但盒子的旋轉原點似乎不在中間的盒子上，它不能旋轉/傾斜到左邊& top。
。const box = document. querySelector（'#box'）。
box.addEventListener('mousemove'/span>, 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>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Animation MouseMove</title>
</head>/span>
<body>
<div class="container">
<div id="box"> </div>>
</div>/span>
</body>
</html>/span>它不能向左& 上旋轉，只是可以向右& 下旋轉。有誰知道如何使它向左或頂部旋轉/傾斜并使原點居中？
uj5u.com熱心網友回復：
嘗試改變transform-origin為50%
transform-origin：50%。
uj5u.com熱心網友回復：
在這里，你可以（如果下面的效果不能讓你滿意，你也可以使用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) / 靈敏度。
let osY = (window.innerHeight / 2 - event.pageY) / 靈敏度。
box.style. transform = `rotateY(${osX}deg) rotateX(${osY}deg)`;
});body{
height: 100vh;
display: flex;
align-items: center;
justify-content:居中。
flex-direction: column;
perspective: 1000px;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
display:flex;
align-items: center;
justify-content:居中。
background: blue;
width: 800px;
height: 800px;
}
.box{
border: 5px solid yellow;
transform-origin: center;
width: 200px;
height: 200px;
background: 紅色。
transform-style: preserve-3d;
display:flex;
align-items: center;
justify-content:居中。
color: #fff;
font-family: verdana;
border-radius: 20%;
}<div class="container"> /span>
<div class="box">/span>
你好，世界!
<div>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320427.html
標籤：
下一篇：我如何在js中進行多次洗掉？