利用css实现的立方体动画

动画是网站开发当中不可缺少的一部分，一个好的动画不仅能提高网站的美观度，还能很好地实现产品的宣传，从而提高网站的用户体验，带来更高的访问量。下面是小世仅用css就实现的一则动画范例，

效果图

效果图

代码：

---

无标题文档

html{background: linear-gradient(#ff0 0%,#3f9 100%);

height: 100%;

}

.box{margin: 200px auto; perspective: 1000px; width: 200px; height: 200px;}

.box:hover .xuanzhuan .out-before{transform: translateZ(200px);}

.box:hover .xuanzhuan .out-after{transform: translateZ(-200px);}

.box:hover .xuanzhuan .out-left{transform: rotateY(90deg) translateZ(200px);}

.box:hover .xuanzhuan .out-right{transform: rotateY(-90deg) translateZ(200px);}

.box:hover .xuanzhuan .out-top{transform: rotateX(90deg) translateZ(200px);}

.box:hover .xuanzhuan .out-bottom{transform: rotateX(-90deg) translateZ(200px);

}

/*上面是炸开的特效*/

.xuanzhuan{

margin: auto;/*旋转体边界*/

width: 200px;/**/

height: 200px;/**/

position: relative;/*定位相对*/

transform-style: preserve-3d;/*变形类型为3d*/

animation: xuanzhuan 20s infinite linear;/*动画是xuanzhaun 周期20s 一直 作匀速运动*/

}

@keyframes xuanzhuan{

/*声明这是动画*/                     0%{transform: rotateX(0deg) rotateY(0deg);}/*变形从XY开始做旋转*/

                    100%{transform:rotateX(360deg) rotateY(360deg);}/*一周期360度*/

                    }

.xuanzhuan > div img{ width: 200px;height: 200px}/*外层图片的大小*/

.xuanzhuan > div{ width: 100%; height: 100%; position: absolute;background-color: rgba(0,0,0,0.50); ;

}/*外层样式 定位绝对*/

.xuanzhuan>span{

width: 50%;

height: 50%;

position: absolute;

top: 50px;

left: 50px;

background: #A6181A;

font-size: 100px;

color: #DEFC05;

font-weight: bold;

}/*内层样式 定位绝对*/

.xuanzhuan .out-before{transform: translateZ(100px);}/*Z轴正方向移动100px*/

.xuanzhuan .out-after{transform: translateZ(-100px) ;}/*Z轴负方向移动100px*/

.xuanzhuan .out-left{transform: rotateY(90deg) translateZ(100px);}/*Y轴旋转正90度，Z轴正方向移动100px*/

.xuanzhuan .out-right{transform: rotateY(-90deg) translateZ(100px);}/*Y轴旋转正-90度，Z轴正方向移动100px*/

.xuanzhuan .out-top{transform: rotateX(90deg) translateZ(100px);}/*X轴旋转90度，Z轴正方向移动100px*/

.xuanzhuan .out-bottom{transform: rotateX(-90deg) translateZ(100px);}/*X轴旋转正90度，Z轴正方向移动100px*/

.xuanzhuan .in-before{transform: translateZ(50px);}

.xuanzhuan .in-after{transform: translateZ(-50px) ;}

.xuanzhuan .in-left{transform: rotateY(90deg) translateZ(50px);}

.xuanzhuan .in-right{transform: rotateY(-90deg) translateZ(50px);}

.xuanzhuan .in-top{transform: rotateX(90deg) translateZ(50px);}

.xuanzhuan .in-bottom{transform: rotateX(-90deg) translateZ(50px);

                                                                                               小世工作室 2018-2-5

本文转载自小世工作室 原文地址：http://www.xiaoshi520.com/plus/view.php?aid=7