使用CSS建立一个炫酷的球体动画效果

我最近看到了一个纯CSS实现的球体动画效果：

通过研究上面的效果实现起来大体能够分为五个步骤，下面就来一一介绍。

1.使用Jade和SCSS生成一个圆圈

建立一个圆圈的第一步是生成全部组成圆圈的粒子。有了Jade，咱们不用一个一个的写出200个div。

如下的代码建立了一个容器.mommy和200个div：

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

添加一点CSS确认一下200个div已经生成：

.mommy{
  border:1px solid black;
}
div{
  width: 4px;
  height: 4px;
  background:red;
}

正以下面你所看到的，咱们生成了一个800px高的红色方块，它是由200个div组成的。

接下来，咱们要将这200个div分别定位在不一样的位置组成一个圆圈，并经过SCSS来实现。

在上面的CSS中还须要再添加一些设置，给全部的div设置绝对定位，并将它们向左和向上移动2px的距离，这样div的中心点与容器的0，0坐标点就重合了。而后，咱们设置容器为固定的宽高大小。

.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循环中为每个div设置不一样的位置，这样就没必要手动的一个一个去设置。首先建立一个变量，它的值等于div的个数，这样在后面若是要用到div的数量值时，直接引用这个变量就能够了。若是有一天须要改变成400个div，只须要在CSS中改变变量的值就能够了。

$amount : 200;
@for $i from 1 through $amount {
  //循环中的代码
}

如今咱们就能够在循环中改变每一个div的坐标了，这须要一点点的数学计算。

如下的函数就是生成圆圈的坐标点的计算公式：

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;

而后咱们将经过公式计算得出的点坐标应用在每一个div上：

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

这是第一步生成的结果，虽然不是很漂亮，可是，嗯，你从零开始创造了一个圆圈！

2.将圆圈变成一个球体

如今咱们有了一个用SCSS生成的圆圈，可是咱们须要的是一个球体。圆圈是一个二维图形，而球体是一个三维立体图形。二维几何图形只有两个轴：X轴和Y轴，而对于三维，又多了一个坐标轴：Z轴。这意味着咱们还要计算每一个div在Z轴上的位置坐标。幸运的是，已经有成熟的公式帮助咱们来定位球体上每一个元素的位置，我不会详细的介绍公式的原理（属于数学范畴），咱们只须要使用就能够了：

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

如今咱们有了以上的函数，它能够彻底知足咱们的需求，咱们把它插入到循环中。

@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);
  }
}

下面就是生成的球体效果，正如你所看到的，全部的div都有从新有了新的位置，可是咱们看到的好像仍然是平面效果，不是3D立体的。

在CSS中有一个叫perspective的属性，它容许咱们为任何元素设置一个特定的透视值。在咱们的例子中，咱们但愿在容器.mommy设置3D效果。而且还须要设置一个transform-style: preserve-3d；这样全部的div就处于立体坐标系中了。

如今咱们能够看到全部div的大小都变得不同了。div距离“屏幕”的距离越远，它就会越小，这意味着它们已经处于立体坐标系中了！

3.旋转球体

全部的div已经就绪了，接下来咱们就要看到最后的结果了。咱们设置一个仅有一个关键帧的动画效果：

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

你可能已经注意到，有些div不是正面屏幕而是与屏幕成90°时，它们就会消失看不到。为了防止这种状况的发生，咱们须要给每一个div一个反方向的旋转，让它们的正面始终面对屏幕显示。

咱们要在div上应用一个反方向的旋转，可是因为已经应用了一个转换，咱们将利用伪元素，它将成为红色的小方块。这样，div自己只须要提供定位做用就能够了，而且设置一个transform-style属性，让div处于3D环境中。

div{
  [...]
  transform-style: preserve-3d;
  &:before{
    content:"";
    display: block;
    width: 4px;
    height:4px;
    background:red;
    animation: rotation 10s infinite linear reverse; 
  }
}

塔达！CSS球体的效果就这样作好了！

4.更炫的球体

在以上代码的基础上，咱们发散思惟，能够作出更加炫酷的球体效果：

获取以上全部球体动画的代码能够：