原文链接
- 最终效果
- 参考代码
按照以下步骤就可以实现。
建立容器和6个面:
最外面的
用于整个结构在页面中的布局，以及设置观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
是6个面的父容器，限制6个面的大小和位置。同时，旋转动画也设置在该容器上。
"wrap">
"content">
"box front">
"box left">
"box right">
"box back">
"box top">
"box bottom">
复制代码
设置样式：
.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;
} 复制代码容器设置旋转动画：
.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);
}
}复制代码各个面设置点数
按1~6的顺序给对应的面的div加入点数。完成后的html应该是这样的：
"wrap">
"content">
"box front">
"item-ct">
"item">
"box left">
"item-ct">
"item">
"item">
"box right">
"item-ct">
"item">
"item">
"item">
"box back">
"item-ct">
"column">
"item">
"item">
"column">
"item">
"item">
"box top">
"item-ct">
"column">
"item">
"item">
"column">
"item">
"column">
"item">
"item">
"box bottom">
"item-ct">
"column">
"item">
"item">
"item">
"column">
"item">
"item">
"item">
复制代码
对应的样式如下：
.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;
}
复制代码设置点数部分的css布局使用的是flex，如果使用grid布局，html结构可能会更简洁一些，你可以试一下。
给每个点数设置颜色渐变动画
这部分代码只有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实现旋转筛子的介绍，文中的方案使用的是固定尺寸、flex布局，还有优化的空间。