一個(gè)純CSS實(shí)現(xiàn)的球體動(dòng)畫效果：

經(jīng)過研究上面的效果實(shí)現(xiàn)起來大致可以分為五個(gè)步驟膘侮，下面就來一一介紹士鸥。

1.使用Jade和SCSS生成一個(gè)圓圈

創(chuàng)建一個(gè)圓圈的第一步是生成所有組成圓圈的粒子遇伞。有了Jade，我們不用一個(gè)一個(gè)的寫出200個(gè)div。

以下的代碼創(chuàng)建了一個(gè)容器.mommy和200個(gè)div：

.mommy
  - for (var x = 0; x < 200; x++)
  div

添加一點(diǎn)CSS確認(rèn)一下200個(gè)div已經(jīng)生成：

.mommy{
  border:1px solid black;
}
div{
  width: 4px;
  height: 4px;
  background:red;
}
專門建立的學(xué)習(xí)Q-q-u-n： 731771211侍郭，分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程掠河，學(xué)習(xí)工具亮元，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

正如下面你所看到的，我們生成了一個(gè)800px高的紅色方塊唠摹，它是由200個(gè)div組成的爆捞。

接下來，我們要將這200個(gè)div分別定位在不同的位置組成一個(gè)圓圈勾拉，并通過SCSS來實(shí)現(xiàn)煮甥。

在上面的CSS中還需要再添加一些設(shè)置，給所有的div設(shè)置絕對(duì)定位藕赞，并將它們向左和向上移動(dòng)2px的距離成肘，這樣div的中心點(diǎn)與容器的0，0坐標(biāo)點(diǎn)就重合了斧蜕。然后双霍，我們?cè)O(shè)置容器為固定的寬高大小。

.mommy{
  border:1px solid black;
  width: 400px;
  height: 400px;
  position: relative;
}
div{
  width: 4px;
  height: 4px;
  background:red;
  position: absolute;
  top: -2px;
  left: -2px;
}

通過SCSS，我們可以在for循環(huán)中為每一個(gè)div設(shè)置不同的位置店煞，這樣就不必手動(dòng)的一個(gè)一個(gè)去設(shè)置蟹演。首先創(chuàng)建一個(gè)變量，它的值等于div的個(gè)數(shù)顷蟀，這樣在后面如果要用到div的數(shù)量值時(shí)酒请，直接引用這個(gè)變量就可以了。如果有一天需要改變成400個(gè)div鸣个，只需要在CSS中改變變量的值就可以了羞反。

$amount : 200;
@for $i from 1 through $amount {
  //循環(huán)中的代碼
}

現(xiàn)在我們就可以在循環(huán)中改變每個(gè)div的坐標(biāo)了，這需要一點(diǎn)點(diǎn)的數(shù)學(xué)計(jì)算囤萤。

以下的函數(shù)就是生成圓圈的坐標(biāo)點(diǎn)的計(jì)算公式：

x = cos((index/amount)*(PI*2))*radius + radius;
y = sin((index/amount)*(PI*2))*radius + radius;

用SCSS來表示上面的公式就是：

$x : cos(($i/$amount)*360deg)*200px + 200;
$y : sin(($i/$amount)*360deg)*200px + 200;

然后我們將通過公式計(jì)算得出的點(diǎn)坐標(biāo)應(yīng)用在每個(gè)div上：

div:nth-child(#{$i}){
    transform: translate3d($x, $y,0px);
}

這是第一步生成的結(jié)果昼窗，雖然不是很漂亮，但是涛舍，嗯澄惊，你從零開始創(chuàng)造了一個(gè)圓圈！

2.將圓圈變成一個(gè)球體

現(xiàn)在我們有了一個(gè)用SCSS生成的圓圈富雅，但是我們需要的是一個(gè)球體掸驱。圓圈是一個(gè)二維圖形，而球體是一個(gè)三維立體圖形没佑。二維幾何圖形只有兩個(gè)軸：X軸和Y軸毕贼，而對(duì)于三維，又多了一個(gè)坐標(biāo)軸：Z軸蛤奢。這意味著我們還要計(jì)算每個(gè)div在Z軸上的位置坐標(biāo)鬼癣。幸運(yùn)的是，已經(jīng)有成熟的公式幫助我們來定位球體上每個(gè)元素的位置啤贩，我不會(huì)詳細(xì)的介紹公式的原理（屬于數(shù)學(xué)范疇）待秃，我們只需要使用就可以了：

θ : (index / amount) * 120;
δ : (index / amount) * PI;
x : radius * cos(δ) * cos(θ);
y : radius * cos(δ) * sin(θ);
z : radius * sin(δ);

現(xiàn)在我們有了以上的函數(shù)，它可以完全滿足我們的需求瓜晤，我們把它插入到循環(huán)中锥余。

@for $i from 1 through $amount {
  $theta : ($i / $amount) * 120;
  $delta : ($i / $amount) * pi();
  $x : 200px * cos($delta) * cos($theta) + 200; //+200 to center our sphere in our 3D world
  $y : 200px * cos($delta) * sin($theta) + 200; //+200 to center our sphere in our 3D world
  $z : 200px * sin($delta);
  div:nth-child(#{$i}){
    transform: translate3d($x, $y,$z);
  }
}
專門建立的學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)痢掠，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具嘲恍，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

下面就是生成的球體效果足画，正如你所看到的，所有的div都有重新有了新的位置佃牛，但是我們看到的好像仍然是平面效果淹辞，不是3D立體的。

在CSS中有一個(gè)叫perspective的屬性俘侠，它允許我們?yōu)槿魏卧卦O(shè)置一個(gè)特定的透視值象缀。在我們的例子中蔬将，我們希望在容器.mommy設(shè)置3D效果。并且還需要設(shè)置一個(gè)transform-style: preserve-3d央星；這樣所有的div就處于立體坐標(biāo)系中了霞怀。

現(xiàn)在我們可以看到所有div的大小都變得不一樣了。div距離“屏幕”的距離越遠(yuǎn)莉给，它就會(huì)越小毙石，這意味著它們已經(jīng)處于立體坐標(biāo)系中了！

3.旋轉(zhuǎn)球體

所有的div已經(jīng)就緒了颓遏，接下來我們就要看到最后的結(jié)果了徐矩。我們?cè)O(shè)置一個(gè)僅有一個(gè)關(guān)鍵幀的動(dòng)畫效果：

.mommy{
  [...]
  animation: rotation 10s linear infinite; 
}
@keyframes rotation{
  to{
    transform:rotateY(360deg);
  }
}

你可能已經(jīng)注意到，有些div不是正面屏幕而是與屏幕成90°時(shí)叁幢，它們就會(huì)消失看不到滤灯。為了防止這種情況的發(fā)生，我們需要給每個(gè)div一個(gè)反方向的旋轉(zhuǎn)曼玩，讓它們的正面始終面對(duì)屏幕顯示鳞骤。

我們要在div上應(yīng)用一個(gè)反方向的旋轉(zhuǎn)，但是由于已經(jīng)應(yīng)用了一個(gè)轉(zhuǎn)換演训，我們將利用偽元素弟孟，它將成為紅色的小方塊。這樣样悟，div本身只需要提供定位作用就可以了拂募，并且設(shè)置一個(gè)transform-style屬性，讓div處于3D環(huán)境中窟她。

div{
  [...]
  transform-style: preserve-3d;
  &:before{
    content:"";
    display: block;
    width: 4px;
    height:4px;
    background:red;
    animation: rotation 10s infinite linear reverse; 
  }
}
專門建立的學(xué)習(xí)Q-q-u-n： 731771211陈症，分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧
（從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程震糖，學(xué)習(xí)工具录肯，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

塔達(dá)！CSS球體的效果就這樣做好了吊说！

4.更炫的球體

在以上代碼的基礎(chǔ)上论咏，我們發(fā)散思維，可以做出更加炫酷的球體效果：

想要學(xué)習(xí)以上所有球體動(dòng)畫的代碼可以加入到我們的學(xué)習(xí)群颁井。