1.建立容器和6個面:
最外面的 <div class="wrap"></div> 用于整個結(jié)構(gòu)在頁面中的布局，以及設置觀察者與z=0平面的距離氮昧，使具有三維位置變換的元素產(chǎn)生透視效果。z>0的三維元素比正常大峡扩，而z<0時則比正常小掂恕，大小程度由該屬性的值決定拖陆。
<div class="content"></div>是6個面的父容器，限制6個面的大小和位置懊亡。同時依啰，旋轉(zhuǎn)動畫也設置在該容器上。
<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>
設置樣式
.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.容器設置旋轉(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.各個面設置點數(shù)
按1~6的順序給對應的面的div加入點數(shù)店枣。完成后的html應該是這樣的：
<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>
對應的樣式如下：
.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ù)部分的css布局使用的是flex速警，如果使用grid布局，html結(jié)構(gòu)可能會更簡潔一些鸯两，你可以試一下闷旧。
4.給每個點數(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實現(xiàn)旋轉(zhuǎn)篩子的介紹，文中的方案使用的是固定尺寸钧唐、flex布局忙灼，還有優(yōu)化的空間。
