本教程簡(jiǎn)述如何用CSS3實(shí)現(xiàn)旋轉(zhuǎn)的球體
效果如下圖所示盅粪，球體沿著中間的軸旋轉(zhuǎn)：
要理解的知識(shí)點(diǎn)
1 三維空間的透視屬性
css屬性：perspective
perspective 屬性有兩個(gè)值娱仔，none 和 自己定義的具體像素，例如1000px。
注意：當(dāng)為元素定義 perspective 屬性時(shí)赡矢，其子元素會(huì)獲得透視效果，而不是元素本身题造，所以我們可以把這個(gè)屬性理解為照相機(jī)和被拍攝物體的距離鹦赎，CSS3 3D 變換中透視的透視點(diǎn)是在瀏覽器的前方谍椅，當(dāng)我們?cè)O(shè)置它的值為具體數(shù)值的時(shí)候，其子元素就會(huì)具有近大遠(yuǎn)小古话，近實(shí)遠(yuǎn)虛的效果雏吭。
目前這個(gè)屬性對(duì)瀏覽器支持還不算太好，只有Chrome 和 Safari 支持替代的 -webkit-perspective 屬性陪踩。
2 css屬性transform-style
這個(gè)屬性瀏覽器支持情況良好杖们，除了ie瀏覽器，其他瀏覽器都支持肩狂。Firefox 支持 transform-style 屬性摘完，而Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 屬性傻谁。
transform-style屬性是設(shè)置其子元素是否保留3d位置的孝治。
它也是有兩個(gè)值：
1 默認(rèn)值是flat,表示其子元素不保留3d位置。
2另一個(gè)值是preserve-3d栅螟，當(dāng)元素設(shè)置了這個(gè)值的時(shí)候荆秦，其子元素就相當(dāng)于進(jìn)入了三維空間。
如圖所示：
x軸表示橫向的軸
y軸表示縱向的軸
z軸其實(shí)就是我們的視線(xiàn)力图，是與我們直視的水平面垂直的
如果一個(gè)元素沿著x軸旋轉(zhuǎn)步绸，可以想象成奧運(yùn)單桿運(yùn)動(dòng)員那樣運(yùn)動(dòng)~
如果一個(gè)元素沿著y軸旋轉(zhuǎn)，可以想象成公園旋轉(zhuǎn)木馬沿著中間的柱子繞圈圈~
而元素沿著z軸旋轉(zhuǎn)的話(huà)更好理解了吃媒，可以想象成視線(xiàn)正前方瓤介，有一個(gè)風(fēng)扇，風(fēng)扇的扇葉就是沿著z軸旋轉(zhuǎn)的~
關(guān)于3d的一些相關(guān)屬性赘那，介紹完畢刑桑，那么開(kāi)始案例制作
結(jié)構(gòu)和樣式
（代碼如下，具體屬性都添加了對(duì)應(yīng)注釋?zhuān)?/p>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ball</title>
<style>
*{padding: 0; margin: 0; list-style: none; border: 0;}
body{background:#000;}
/* 設(shè)置透視盒子在瀏覽器水平和垂直都居中 */
.ball{
width: 300px;
height: 300px;
position:absolute;
left: 50%; top: 50%;
margin-left: -150px;
margin-top: -150px;
perspective:3000px;
-webkit-perspective:3000px;
}
/* 設(shè)置此元素子元素保留3d位置 */
.ball_in{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-style:preserve-3d;
}
/* 實(shí)體化這些li募舟，然后設(shè)置其為圓形 */
.ball_in li{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius:50%;
}
/* 對(duì)不同的li沿著y軸旋轉(zhuǎn)不同的角度祠斧，其實(shí)圓球體就出來(lái)了 */
/* 5個(gè)li元素，所以每個(gè)旋轉(zhuǎn)的角度是360/2/5=36deg */
.ball_in li:nth-child(1){transform:rotateY(0);}
.ball_in li:nth-child(2){transform:rotateY(36deg);}
.ball_in li:nth-child(3){transform:rotateY(72deg);}
.ball_in li:nth-child(4){transform:rotateY(108deg);}
.ball_in li:nth-child(5){transform:rotateY(144deg);}
</style>
</head>
<body>
<div><!--設(shè)置透視屬性的盒子拱礁，其子元素將具有透視效果-->
<ul><!--設(shè)置其子元素保留3d位置的元素-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果如圖：
此時(shí)我們給球體整體則.ball_in元素沿著x軸向前傾斜和沿著z軸向左傾斜一定角度琢锋，則立體感更強(qiáng)。
代碼：
.ball_in{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-style:preserve-3d;
/* 球體向前傾斜30deg,向左傾斜30deg */
transform:rotateX(-30deg) rotateZ(-30deg);
}
效果如圖：
利用偽元素給球體添加中心軸呢灶，代碼如下：
/* 利用偽元素給球體添加中心軸 */
.ball_in:after{
content:"";
position:absolute;
width: 2px;
height:500px;
background:blue;
left:150px;
top:-100px;
}
效果如圖：
最后步驟吴超，給每個(gè)li添加顏色和整個(gè)球體添加旋轉(zhuǎn)的動(dòng)畫(huà)：
整個(gè)球體添加旋轉(zhuǎn)的動(dòng)畫(huà)代碼如下：
.ball_in{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
/* 球體向前傾斜30deg,向左傾斜30deg */
transform:rotateX(-30deg) rotateZ(-30deg);
/* 球體旋轉(zhuǎn)動(dòng)畫(huà) */
animation:circle 10s linear infinite;
}
/* 定義旋轉(zhuǎn)動(dòng)畫(huà) */
@keyframes circle{
0%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(0);}
100%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(360deg);}
}
最終效果如圖：
（繞著y軸轉(zhuǎn)圈圈）
是否覺(jué)得五顏六色的球體沒(méi)意思？
其實(shí)還可以改裝一下鸯乃，搞點(diǎn)小意思鲸阻，例如球體不需要那么多個(gè)面，然后把剩余的面換成好看的圖片,改裝后效果如圖：
有沒(méi)有一種cd在三維空間旋轉(zhuǎn)的感覺(jué)？
又或者我們?cè)俑难b一下鸟悴，效果如下圖：
好了陈辱，最后奉上案例源碼，有興趣的朋友可以自行下載遣臼。
