<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.c {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 1000px;
perspective-origin: 150% -50%;
}
.container {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
perspective: 1000px;
perspective-origin: 150% -50%;
}
.item {
position: absolute;
width: 200px;
height: 200px;
}
.one {
background-color: blue;
opacity: 0.3;
transform: translateZ(100px);
}
.two {
background-color: pink;
opacity: 0.3;
transform: rotateY(180deg) translateZ(100px);
}
.three {
background-color: purple;
opacity: 0.3;
transform: rotateY(90deg) translateZ(100px);
}
.four {
background-color: red;
opacity: 0.3;
transform: rotateY(-90deg) translateZ(100px);
}
.five {
background-color: yellow;
opacity: 0.3;
transform: rotateX(90deg) translateZ(100px);
}
.six {
background-color: green;
opacity: 0.3;
transform: rotateX(-90deg) translateZ(100px);
}
</style>
<body>
<div class="c">
<div class="container">
<div class="one item"></div>
<div class="two item"></div>
<div class="three item"></div>
<div class="four item"></div>
<div class="five item"></div>
<div class="six item"></div>
</div>
</div>
</body>
<script>
const ele = document.querySelector('.container')
ele.addEventListener('mousedown', function (e) {
let p1 = e.pageX - ele.offsetLeft
let p2 = e.pageY - ele.offsetTop
document.addEventListener('mousemove', move)
function move(e) {
console.log('1111');
// ele.style.left = e.pageX - p1 + 'px'
// ele.style.top = e.pageY - p2 + 'px'
ele.style.transform = "rotateX(" + (e.pageX - p1) + "deg) rotateY(" + (e.pageY - p2) + "deg) rotateZ(0deg)";
}
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>
</html>
正方体鼠标旋转
最新推荐文章于 2024-08-23 11:10:08 发布