制作一个3D的旋转盒子

好的各位小伙伴

今天咱们来做一个

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！