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