用css3属性很容易做一个立方体，但是要做一个球体，会相对复杂些
原理是：球可以看做是由无数个圆圈构成，然后就可以用圆圈来做球，
下面的例子是我做的一个小球，由72个圆圈组成。如果把每个圆圈的背景颜色设置同一颜色，效果更佳
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
perspective: 1000px;
background-color: grey;
}
.bigBox{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
margin: 100px auto;
transform-style: preserve-3d; }
ul{
padding: 0;
margin: 0;
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 0 0 1px 1px yellowgreen;
position: absolute;
list-style: none;
transform-style: preserve-3d; } .qiuXian{
padding: 0;
margin: 0;
width: 80px;
height: 80px; border-radius: 50%;
box-shadow: 0 0 1px 1px yellowgreen;
position: absolute;
list-style: none; } @keyframes zizhuan {
from{rotateX(0deg) rotateY(0deg) }
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
.animation{
animation: zizhuan 10s linear infinite;
}
</style>
<script> window.onload= function () { function zaoQiu(id,className) {
var ele = document.getElementById(id);
for(var i = 0 ; i < 72 ; i++){
//创建div元素
var div = document.createElement("div"); //将创建出来的div的className 统一设置为className,方便通过CSS 设置样式
div.className = className; //在目标元素中添加该div
ele.appendChild(div);
}
//获取新创建出来的所有div
var divs = document.getElementsByClassName(className); //首先遍历前一半的div，并设置他们的属性
for(var i = 0 ; i < 36 ; i++){
divs[i].style.transform = "rotateY("+10*i+"deg)";
}
//遍历后一半的div，并设置它们的属性
for(var i = 36 ; i < divs.length ; i++){
divs[i].style.transform = "rotateX("+10*i+"deg)";
}
}
zaoQiu("bigBox","qiuXian"); } </script>
</head>
<body>
<div class="bigBox animation" id="bigBox"> </div>
</body>
</html>