• 最終效果
• 參考代碼
  按照以下步驟就可以實(shí)現(xiàn)。

1.建立容器和6個(gè)面:

最外面的 <div class="wrap"></div> 用于整個(gè)結(jié)構(gòu)在頁面中的布局，以及設(shè)置觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0的三維元素比正常大，而z<0時(shí)則比正常小，大小程度由該屬性的值決定。
<div class="content"></div>是6個(gè)面的父容器，限制6個(gè)面的大小和位置。同時(shí)，旋轉(zhuǎn)動畫也設(shè)置在該容器上。

<div class="wrap">
  <div class="content">
    <div class="box front"></div>
    <div class="box left"></div>
    <div class="box right"></div>
    <div class="box back"></div>
    <div class="box top"></div>
    <div class="box bottom"></div>
  </div>
</div>

設(shè)置樣式

.wrap{
    width: 200px;
    height: 200px;
    position: relative;
    margin: 100px auto;
    perspective: 1200px;
}
.content{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: translateZ(100px) rotateY(45deg) rotateZ(45deg) rotateX(90deg);
}
.box{
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius:50px;
    transform-style: preserve-3d;
}
.front{
    transform: translateZ(100px);
    background: #7FFF00;
}
.back{
    transform: rotateY(180deg) translateZ(100px);
    background: #00FFFF;
}
.left{
    transform: rotateY(-90deg) translateZ(100px);
    background: #DC143C;
}
.right{
    transform: rotateY(90deg) translateZ(100px);
    background: #808000;
}
.top{
    transform: rotateX(90deg) translateZ(100px);
    background: #EE82EE;
}
.bottom{
    transform: rotateX(-90deg) translateZ(100px);
    background: #FFFF00;
}
      

2.容器設(shè)置旋轉(zhuǎn)動畫：

.content{
    /* ... */
    animation: rotating 4s linear infinite; 
}
@keyframes rotating{
    0%{
    transform:translateZ(100px) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
    }
    100%{
    transform:translateZ(100px) rotateY(360deg) rotateZ(360deg) rotateX(360deg);
    }
}

3.各個(gè)面設(shè)置點(diǎn)數(shù)

按1~6的順序給對應(yīng)的面的div加入點(diǎn)數(shù)。完成后的html應(yīng)該是這樣的：

<div class="wrap">
  <div class="content">
    <div class="box front">
        <div class="item-ct">
            <div class="item"></div>
        </div>
    </div>
    <div class="box left">
        <div class="item-ct">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="box right">
        <div class="item-ct">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="box back">
        <div class="item-ct">
            <div class="column">
              <div class="item"></div>
              <div class="item"></div>
           </div>
           <div class="column">
              <div class="item"></div>
              <div class="item"></div>
            </div>
        </div>
    </div>
    <div class="box top">
        <div class="item-ct">
            <div class="column">
              <div class="item"></div>
              <div class="item"></div>
           </div>
           <div class="column">
              <div class="item"></div>
           </div>
           <div class="column">
              <div class="item"></div>
              <div class="item"></div>
            </div>
        </div>
    </div>
    <div class="box bottom">
        <div class="item-ct">
            <div class="column">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
           </div>
           <div class="column">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
            </div>
        </div>
    </div>
  </div>
</div>

對應(yīng)的樣式如下：

.item{
    width:50px;
    height:50px;
    border-radius: 50%;
}
.item-ct{
    position:absolute;
    left:20px;
    top:20px;
    right:20px;
    bottom:20px;
    display:flex;
    transform-style:preserve-3d;
}
.front .item-ct{
    justify-content:center;
    align-items:center;
}
.left .item-ct{
    justify-content:space-between;
    align-items:flex-start;
}
.left .item:nth-child(2){
    align-self:flex-end;
}
.right .item-ct{
    justify-content:space-between;
}
.right .item:nth-child(2){
    align-self:center;
}
.right .item:nth-child(3){
    align-self:flex-end;
}
.back .item-ct{
    flex-wrap:wrap;
    align-content:space-between;
}
.column{
    display: flex;
    flex-basis: 100%;
}
.back .column:nth-child(1){
    align-items:flex-start;
    justify-content:space-between;
}
.back .column:nth-child(2){
    justify-content:space-between;
    align-items:flex-end;
}
.top .item-ct{
    flex-wrap:wrap;
    align-content:space-between;
}
.top .column:nth-child(1){
    justify-content:space-between;
    align-items:flex-start;
}
.top .column:nth-child(2){
    justify-content:center;
    align-items:center;
    height:20px;
}
.top .column:nth-child(3){
    justify-content:space-between;
    align-items:flex-end;
}
.bottom .item-ct{
    flex-wrap:wrap;
    align-content:space-between;
}
.bottom .column:nth-child(1){
    justify-content:space-between;
    align-items:flex-start;
}
.bottom .column:nth-child(2){
    justify-content:space-between;
    align-items:flex-end;
}

設(shè)置點(diǎn)數(shù)部分的css布局使用的是flex，如果使用grid布局，html結(jié)構(gòu)可能會更簡潔一些，你可以試一下。

4.給每個(gè)點(diǎn)數(shù)設(shè)置顏色漸變動畫

這部分代碼只有css：

.item{
    /* ... */
    animation: shineChange 4s linear infinite;
}
@keyframes shineChange {
    from {
        background-color: #4169E1 ;
        box-shadow:inset 0 0 25px #416981;
    }
    50% {
        background-color:  #FFA500;
        box-shadow: inset 0 0 70px #ddA590;
    }
    to {
        background-color: #4169E1 ;
        box-shadow:inset 0 0 25px #416981;
    }
}

以上就是使用CSS3實(shí)現(xiàn)旋轉(zhuǎn)篩子的介紹，文中的方案使用的是固定尺寸、flex布局，還有優(yōu)化的空間。