let container = document.querySelector('.container')
let cube = document.querySelector('.cube')
// let rotateble = false
// let k = 0.5
let x = 0;
let y = 0;
// container.addEventListener('mousemove', function (e) {
// if (rotateble) {
// console.log(e)
// x += e.movementX
// y += e.movementY
// cube.style.transform = `rotateX(${-y}deg) rotateY(${x}deg)`
// }
// })
//给容器添加一个监听鼠标左键按下的事件
container.addEventListener('mousedown', function () {
//当鼠标按下的时候给容器添加监听鼠标移动事件
this.addEventListener('mousemove',rotate)
})
//给容器添加一个监听鼠标左键抬起的事件
container.addEventListener('mouseup', function () {
//当鼠标左键抬起的时候给容器移除监听鼠标移动事件
this.removeEventListener('mousemove',rotate)
})
//鼠标移动事件的回掉函数
function rotate(e) {
x += e.movementX //movementX系统监听鼠标移动两次之间的相对位移
y += e.movementY
cube.style.transform = `rotateX(${-y}deg) rotateY(${x}deg)`
}
//movementX
//例如系统每隔0.1s相应一次鼠标移动,movementX就是0.1s到0.2s鼠标x移动的距离