1.html
<div class="world">
<div id="cube" tabindex="0">
<div id="cube__front"></div>
<div id="cube__back"></div>
<div id="cube__left"></div>
<div id="cube__right"></div>
<div id="cube__top"></div>
<div id="cube__bottom"></div>
</div>
</div>
2.css
/*定义外层,perspective是透视角*/
.world {
perspective: 800px;
width: 200px;
height: 200px;
margin: 200px;
}
/*设置视图为3d,使用旋转动画*/
#cube {
transform-style: preserve-3d;
width: 100%;
height: 100%;
animation: rotator 5s linear infinite;
}
/*设置每一片的基础样式*/
#cube * {
box-shadow: 0 0 3px currentColor;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*设置一定的翻转角度使6片形成正方体*/
#cube__front {
color: deeppink;
transform: translateZ(100px);
}
#cube__back {
color: seagreen;
transform: rotateY(180deg) translateZ(100px);
}
#cube__right {
color: lightcoral;
transform: rotateY(90deg) translateZ(100px);
}
#cube__left {
color: skyblue;
transform: rotateY(-90deg) translateZ(100px);
}
#cube__top {
color: mediumseagreen;
transform: rotateX(90deg) translateZ(100px);
}
#cube__bottom {
color: dodgerblue;
transform: rotateX(-90deg) translateZ(100px);
}
/*简单的动画*/
@keyframes rotator {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}