好的各位小伙伴
今天咱们来做一个
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: 200px auto;
box-shadow: 0 0 10px 0 #000; border: 1px solid transparent; perspective: 800px;}
/*大盒子*/
.main .bigBox { position: relative; width: 200px; height: 200px;
margin: 100px auto; transform-style: preserve-3d;animation: move 4s infinite alternate;}
.main .bigBox p{ position: absolute; width: 200px; height: 200px;
box-shadow: 0 0 10px 0 red;font: bold 30px/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: play2 4s infinite alternate;}
.main .smallBox p{ position: absolute;width: 100px; height: 100px;
box-shadow: 0 0 10px 0 red;font: bold 30px/100px ""; color: red; text-align: center; }
/*大盒子布局*/
.main .bigBox p:nth-child(1){ left: 0; top: 0; transform: translateZ(100px); }
.main .bigBox p:nth-child(2){ left: -200px; top: 0; transform: translateZ(100px) rotateY(-90deg);
transform-origin: right; }
.main .bigBox p:nth-child(3){ left: 200px; top: 0; transform: translateZ(100px) rotateY(90deg);
transform-origin: left; }
.main .bigBox p:nth-child(4){ left: 0; top: -200px; transform: translateZ(100px) rotateX(90deg);
transform-origin: bottom; animation: play1 4s infinite alternate;}
.main .bigBox p:nth-child(5){ left: 0; top: 200px; transform: translateZ(100px) rotateX(-90deg);
transform-origin: top; }
.main .bigBox p:nth-child(6){ left: 0; top: 0; transform: translateZ(-100px); }
/*小盒子布局*/
.main .smallBox p:nth-child(1){ left: 0; top: 0; background: url("img/1.jpg")no-repeat center/cover;transform: translateZ(50px); }
.main .smallBox p:nth-child(2){ left: -100px; top: 0;background: url("img/2.jpg")no-repeat center/cover; transform: translateZ(50px) rotateY(-90deg);
transform-origin: right; }
.main .smallBox p:nth-child(3){ left: 100px; top: 0;background: url("img/3.jpg")no-repeat center/cover; transform: translateZ(50px) rotateY(90deg);
transform-origin: left; }
.main .smallBox p:nth-child(4){ left: 0; top: -100px;background: url("img/4.jpg")no-repeat center/cover; transform: translateZ(50px) rotateX(90deg);
transform-origin: bottom; }
.main .smallBox p:nth-child(5){ left: 0; top: 100px;background: url("img/5.jpg")no-repeat center/cover; transform: translateZ(50px) rotateX(-90deg);
transform-origin: top; }
.main .smallBox p:nth-child(6){ left: 0; top: 0;background: url("img/6.jpg")no-repeat center/cover; transform: translateZ(-50px); }
@-webkit-keyframes move {
to{ transform: rotateY(90deg);}
}
@-webkit-keyframes play1 {
to{ transform: translateZ(100px) rotateX(0deg);}
}
@-webkit-keyframes play2 {
to{ transform: rotateY(90deg); top: -50px;}
}
今天就到这里了
小伙伴们再见了
网友评论