<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D球体</title>
<style>
html,body{
height: 100%;
background-color: white;
}
.box{
width: 100%;
height: 100%;
perspective: 800px;
position: relative;
}
.unit{
width: 100%;
height: 100%;
transform-style:preserve-3d;
transition: all 1s ease 0s;
}
div.slice{
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 80px;
opacity: 0.3;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="unit">
</div></div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
var $unit = $(".unit");
//调用函数
for(i=0;i<5;i++){
var arr=[18,15,12,9,6];
ball(i,arr[i]);
//这里是continue，当i=0的时候，直接进入下一次循环。否则要执行ball（-i，arr【i】）
if(i==0) continue;
ball(-i,arr[i]);
}
//构造一个函数 有两个参数 （层数，每层片数）
function ball(floor,amount){
for(var i=0;i<amount;i++){
$("<div class='slice'></div>").css({
"transform": "rotateY("+ 360/amount*i + "deg) rotateX("+ floor*18 +"deg) translateZ(300px)"
}).appendTo($(".unit"));
}}
//绑定拖拽的事件监听 最好绑定在document上，绑定在unit上也行，就是鼠标必须在球上面移动，比较局限
$(document).mousedown(function(event){
var startX = event.clientX;
var startY = event.clientY;
$unit.css("transition","none");
$(document).mousemove(function(event){
event.preventDefault;
var deltaX = event.clientX - startX;
var deltaY = event.clientY - startY;
$($unit).css({
"transform":"rotateX(" + deltaX/10 + "deg) rotateY(" + deltaY/10+"deg)",
})
$(".slice").css({
"background" : "rgb(" + 111 + "," + 123+ "," + parseInt(Math.random() * 255) + ")"
})
})
})
$(document).mouseup(function(){
$(document).off("mousemove");
})
//绑定滚轮的事件监听
//初始景深
var per = 800;
$(document).mousewheel(function(event,delta){
event.preventDefault();
//有了全局变量这里如果再定义per就会出错 报的错是语法错误“+=” 但其实是这个变量的问题
per += delta*40;
if(per < 100) return; //景深限定在100
$(".box").css({
"perspective": per + "px"
})
})
</script>
</body>
</html>
