CSS-animation动画

<div class="wrap">
<div class="wrap-1">
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
<style><!--
.wrap{ width: 400px;height: 400px;
position: fixed;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
perspective:1000px;}
.wrap-1{position:absolute;width: 100%;height: 100%;
transform-style:preserve-3d;
animation:rotate 5s 14s linear infinite both;
}
.wrap-1 div{position:absolute;width: 100%;height:100%;
box-sizing:border-box;
border:2px solid black;
background-color: rgba(0,0,0,0);
font:40px "微软雅黑";
text-align: center;line-height:400px;
}
/*设置矩形展开动画*/
.top{animation:top 2s 2s linear both;}
.bottom{animation:bottom 2s 4s linear both;}
.left{animation:left 2s 6s linear both;}
.right{animation:right 2s 8s linear both;}
.back{animation:back 2s 10s linear both;}
.front{animation:front 2s 12s linear both;}
/*定义矩形关键栈*/
@keyframes top{
100%{transform:rotateX(90deg) translateZ(200px)}}
@keyframes bottom{
100%{transform:rotateX(-90deg) translateZ(200px)}}
@keyframes left{
100%{transform:rotateY(-90deg) translateZ(200px)}}
@keyframes right{
100%{transform:rotateY(90deg) translateZ(200px)}}
@keyframes front{
100%{transform:translateZ(200px)}}
@keyframes back{
100%{transform:rotateY(180deg) translateZ(200px)}}
/*定义矩形整体旋转关键栈*/
@keyframes rotate{
100%{transform:rotate3d(1,1,1,360deg)}}
/*设置hover效果，当鼠标移动到元素时的效果*/
.wrap:hover .wrap-1 div{color:#fff;}
.wrap:hover .wrap-1 .top{background-color: rgba(255,0,0,0.8)}
.wrap:hover .wrap-1 .bottom{background-color: rgba(0,255,0,0.8);}
.wrap:hover .wrap-1 .left{background-color: rgba(0,0,255,0.8);}
.wrap:hover .wrap-1 .right{background-color: rgba(255,255,0,0.8);}
.wrap:hover .wrap-1 .front{background-color: rgba(255,0,255,0.8);}
.wrap:hover .wrap-1 .back{background-color: rgba(0,255,255,0.8);}
--></style>

 

 

top

bottom

left

right

front

back