<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D旋转立方体</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html{ padding: 0px; margin: 0px;width: 100%; height: 100%; position: relative;}
.Cube{position: absolute; transform:rotateX(20deg) rotateY(20deg); transform-style: preserve-3d;top: 40%; left: 40%; width: 100px; height: 100px; }
.Cube div{ width: 100px; height: 100px;position: absolute; left: 0; top: 0; font-size: 20px; line-height: 100px; text-align: center; opacity:0.4; }
.Cube1{ background: red; transform:rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(50px) }
.Cube2{ background: green; transform:rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(-50px) ;}
.Cube3{ background:black; transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(50px) ;}
.Cube4{ background:aqua; transform:rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(-50px);}
.Cube5{ background:coral;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);}
.Cube6{ background:blueviolet; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-50px);}
</style>
</head>
<body>
<div class="body" >
<div class="Cube">
<div class="Cube1">1</div>
<div class="Cube2">2</div>
<div class="Cube3">3</div>
<div class="Cube4">4</div>
<div class="Cube5">5</div>
<div class="Cube6">6</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var x=20;
var y=20;
var bo=false;
var $dom=$(".Cube");
$("body").mousedown(function(e){
bo=true;
})
$("body").mousemove(function(e){
if(bo){
let t_x=e.clientX;
let t_y=e.clientY;
xuanzhuan(t_x,t_y)
}
})
$("body").mouseup(function(e){
bo=false;
})
function xuanzhuan(x1,y1){
var rotateX=-y1-y;
var rotateY=x1-x;
$dom.css({transform:"rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)"});
}
})
</script>
</body>
</html>
