制作一個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:?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;}

}

今天就到這里了

小伙伴們再見了

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • perspective的介紹 指定觀察者距離z=0平面的距離,為元素及其內容應用透視變換。當值為0或負值時,無透視...
    sunny519111閱讀 3,693評論 1 6
  • 各種純css圖標 CSS3可以實現很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,656評論 0 8
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,656評論 0 7
  • 用屹立不倒的心境,努力去追求我想要的美好生活
    愛眉小札2016閱讀 206評論 0 0
  • 雨意念花開,風迎綠樹來。 生香心醉處,情透暖胸懷。 作者王永豪
    王永豪閱讀 177評論 0 6