好的各位小伙伴
今天咱们来做一个
3D的旋转盒子
制作3D旋转盒子
老规矩，不要急着动手先来分析一波。先不管旋转，3D盒子首先就是一个盒子，由六个面组成。就像下面这样：
我们要做的就是，先在平面上绘制六个面，然后给图片一个3D的环境，把六个面组成一个正方体的盒子。那么分析就到这里了，下面我们开始实践吧~
这样就把这六个面制作出来了，为了区分还加了编号。先在我们看着这六个面是重叠在一起的。
现在我们来给盒子的六个面进行定位。
其他的几个面都移动了位置，现在只有1号面和6号面重叠在一起了。
现在来给盒子设置景深，方便我们来制作3D的盒子。
给盒子一个旋转的效果，现在立体感是不是明显了很多~
现在我们来给这个正方体的六个面进行空间定位。
仅仅是定位是不够的，还需要给面进行旋转，这些之前的文章有介绍就不赘述了
大盒子的3d效果完成了，下面制作小盒子的工作就简单了，直接把制作大盒子的代码复制一下，修改一下代码就可以显示两个盒子了。
现在大盒子套小盒子的效果完成了，还可以是吧~
最后一步，给小盒子添加背景图片，并且修改盒子的动作（大盒子开盖，小盒子从大盒子中出来）。
最终效果：
我们的3D盒子旋转效果就做出来了，这只是一个雏形，大家可以开动脑经，来丰富这个效果，快来动手给身边的伙伴显摆一下吧~
(注意选好对象，被打脸了本人概不负责)
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after{content:"";display: block;clear: both;}
.fl{float: left;}
.fr{float: right;}
.main{position: relative;width:400px;height:400px;margin:200pxauto;
box-shadow:0010px0#000;border:1pxsolid transparent;perspective:800px;}
/*大盒子*/
.main.bigBox{position: relative;width:200px;height:200px;
margin:100pxauto;transform-style: preserve-3d;animation: move4sinfinite alternate;}
.main.bigBoxp{position: absolute;width:200px;height:200px;
box-shadow:0010px0red;font: bold30px/200px"";color: red;text-align: center; }
/*小盒子*/
.main.smallBox{position: absolute;left:calc(50% - 50px);top:calc(50% - 50px);
width:100px;height:100px;transform-style: preserve-3d;animation: play24sinfinite alternate;}
.main.smallBoxp{position: absolute;width:100px;height:100px;
box-shadow:0010px0red;font: bold30px/100px"";color: red;text-align: center; }
/*大盒子布局*/
.main.bigBoxp:nth-child(1){left:0;top:0;transform:translateZ(100px); }
.main.bigBoxp:nth-child(2){left: -200px;top:0;transform:translateZ(100px)rotateY(-90deg);
transform-origin: right; }
.main.bigBoxp:nth-child(3){left:200px;top:0;transform:translateZ(100px)rotateY(90deg);
transform-origin: left; }
.main.bigBoxp:nth-child(4){left:0;top: -200px;transform:translateZ(100px)rotateX(90deg);
transform-origin: bottom;animation: play14sinfinite alternate;}
.main.bigBoxp:nth-child(5){left:0;top:200px;transform:translateZ(100px)rotateX(-90deg);
transform-origin: top; }
.main.bigBoxp:nth-child(6){left:0;top:0;transform:translateZ(-100px); }
/*小盒子布局*/
.main.smallBoxp:nth-child(1){left:0;top:0;background:url("img/1.jpg")no-repeatcenter/cover;transform:
translateZ(50px); }
.main.smallBoxp:nth-child(2){left: -100px;top:0;background:url("img/2.jpg")no-repeatcenter/cover;transform:
translateZ(50px)rotateY(-90deg);
transform-origin: right; }
.main.smallBoxp:nth-child(3){left:100px;top:0;background:url("img/3.jpg")no-repeatcenter/cover;transform:
translateZ(50px)rotateY(90deg);
transform-origin: left; }
.main.smallBoxp:nth-child(4){left:0;top: -100px;background:url("img/4.jpg")no-repeatcenter/cover;transform:
translateZ(50px)rotateX(90deg);
transform-origin: bottom; }
.main.smallBoxp:nth-child(5){left:0;top:100px;background:url("img/5.jpg")no-repeatcenter/cover;transform:
translateZ(50px)rotateX(-90deg);
transform-origin: top; }
.main.smallBoxp:nth-child(6){left:0;top:0;background:url("img/6.jpg")no-repeatcenter/cover;
transform:translateZ(-50px); }
@-webkit-keyframesmove {
to{transform:rotateY(90deg);}
}
@-webkit-keyframesplay1 {
to{transform:translateZ(100px)rotateX(0deg);}
}
@-webkit-keyframesplay2 {
to{transform:rotateY(90deg);top: -50px;}
}
今天就到这里了
小伙伴们再见了
学习Java的同学注意了！！！学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群：253772578，我们一起学Java！
