CSS3轻松实现彩色旋转六面体动画

来源：互联网发布：大数据发展趋势 ppt 编辑：程序博客网时间：2024/05/22 13:59

一、效果预览：

这里写图片描述

二、基本思路：

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度，前面平移一样可以完成，但得到的效果与上面有差异，不够对称。

阅读全文

0 0