<!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>
