好的各位小伙伴
今天咱們來做一個(gè)
3D的旋轉(zhuǎn)盒子
制作3D旋轉(zhuǎn)盒子
老規(guī)矩，不要急著動(dòng)手先來分析一波。先不管旋轉(zhuǎn)，3D盒子首先就是一個(gè)盒子，由六個(gè)面組成。就像下面這樣：
我們要做的就是，先在平面上繪制六個(gè)面，然后給圖片一個(gè)3D的環(huán)境，把六個(gè)面組成一個(gè)正方體的盒子。那么分析就到這里了，下面我們開始實(shí)踐吧~
這樣就把這六個(gè)面制作出來了，為了區(qū)分還加了編號(hào)。先在我們看著這六個(gè)面是重疊在一起的。
現(xiàn)在我們來給盒子的六個(gè)面進(jìn)行定位。
其他的幾個(gè)面都移動(dòng)了位置，現(xiàn)在只有1號(hào)面和6號(hào)面重疊在一起了。
現(xiàn)在來給盒子設(shè)置景深，方便我們來制作3D的盒子。
給盒子一個(gè)旋轉(zhuǎn)的效果，現(xiàn)在立體感是不是明顯了很多~
現(xiàn)在我們來給這個(gè)正方體的六個(gè)面進(jìn)行空間定位。
僅僅是定位是不夠的，還需要給面進(jìn)行旋轉(zhuǎn)，這些之前的文章有介紹就不贅述了
大盒子的3d效果完成了，下面制作小盒子的工作就簡(jiǎn)單了，直接把制作大盒子的代碼復(fù)制一下，修改一下代碼就可以顯示兩個(gè)盒子了。
現(xiàn)在大盒子套小盒子的效果完成了，還可以是吧~
最后一步，給小盒子添加背景圖片，并且修改盒子的動(dòng)作（大盒子開蓋，小盒子從大盒子中出來）。
最終效果：
我們的3D盒子旋轉(zhuǎn)效果就做出來了，這只是一個(gè)雛形，大家可以開動(dòng)腦經(jīng)，來豐富這個(gè)效果，快來動(dòng)手給身邊的伙伴顯擺一下吧~
(注意選好對(duì)象，被打臉了本人概不負(fù)責(zé))
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;}
}
今天就到這里了
小伙伴們?cè)僖娏?/p>
