好的各位小伙伴
今天咱們來做一個
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;}
}
今天就到這里了
小伙伴們再見了
