一、效果预览：
二、基本思路：
1、首先这个一个自动触发的动画，因此应使用animation设计，包括自动组装和组装完成后自动旋转的过程；
2、当鼠标放上去的时候六个面及上面的字体均变色，应在六个面设置一个transition触发动画，触发条件为父元素的hover。
三、实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转六面体动画</title>
<style>
body{
margin: 0;/*清除默认外边距*/
}
.m-frame{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*实现垂直水平均居中*/
perspective: 550px;/*在画框上设置透视*/
}
.m-frame .canvas{
position: relative;
width: 300px;
height: 300px;
animation: canvas 2s linear 12s infinite;
transform-style: preserve-3d;/*让子元素保留3d效果*/
}
.m-frame .canvas .side{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
text-align: center;/*文字水平居中*/
line-height: 300px;/*文字垂直居中*/
transition: all 0.3s linear 0s;
}
.m-frame .canvas .side{
animation: top 2s 0s forwards;
}
.m-frame .canvas .bottom{
animation: bottom 2s 2s forwards;
}
.m-frame .canvas .left{
animation: left 2s 4s forwards;
}
.m-frame .canvas .right{
animation: right 2s 6s forwards;
}
.m-frame .canvas .back{
animation: back 2s 8s forwards;
}
.m-frame .canvas .front{
animation: front 2s 10s forwards;
}
@keyframes top{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(90deg) translateZ(150px);
}
}
@keyframes bottom{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(-90deg) translateZ(150px);
}
}
@keyframes left{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-90deg) translateZ(150px);
}
}
@keyframes right{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(90deg) translateZ(150px);
}
}
@keyframes back{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-180deg) translateZ(150px);
}
}
@keyframes front{
from{
transform: rotateY(0deg);
}
to{
transform: translateZ(150px);
}
}
@keyframes canvas{
from{
transform: rotate3d(1,1,1,0);
}
to{
transform: rotate3d(1,1,1,360deg);
}
}
.m-frame .canvas:hover .side{
color: white;
}
.m-frame .canvas:hover .front{
background-color: rgba(128,0,128,0.7);
}
.m-frame .canvas:hover .bottom{
background-color: rgba(0,128,0,0.7);
}
.m-frame .canvas:hover .left{
background-color: rgba(0,255,255,0.7);
}
.m-frame .canvas:hover .right{
background-color: rgba(0,0,255,0.7);
}
.m-frame .canvas:hover .top{
background-color: rgba(255,165,0,0.7);
}
.m-frame .canvas:hover .back{
background-color: rgba(255,0,0,0.7);
}
</style>
</head>
<body>
<div class="m-frame"><!--画框-->
<div class="canvas"><!--画布-->
<div class="side top">城会玩</div>
<div class="side bottom">单身狗</div>
<div class="side left">你是个好人,我们不适合</div>
<div class="side right">皮皮虾，我们走</div>
<div class="side back">王者农药kengB队友</div>
<div class="side front">资深宅男技术控</div>
</div>
</div>
</body>
</html>
四、实践中的一些总结：
1、尽量使代码易阅读，但也使代码量显得较大，或许有优化的方法；
2、在鼠标悬停时，变色过程伴有一定的卡顿，猜想是动画本就比较占用资源，变色操作时重新渲染导致资源占用更大。我采用了将变色的时间设成0.3s这样很小的数，可以使渲染过程快速结束，使得卡顿不太明显。实测如果变色过程时间设得越大，卡顿持续越久。
3、设置画框的原因：
实测在画布上设置perspective时，旋转过程不是正方体形状。这里大胆推测，旋转设置在画布上，这使得视点和画布表面的距离始终在变动中，由于远大近小，故而不会显示成正方体。在画框上透视时，视点距画框的位置始终是一定的。
4、组装过程的另一种实现：
上下左右各面由div分别绕上、下、左、右边旋转90度，不再进行Z轴上的平移，后面旋转180度，前面平移一样可以完成，但得到的效果与上面有差异，不够对称。
