d旋轉(zhuǎn)圖：主要用css3中transform屬性中的rotate,translate;以及用來做舞臺效果的 perspective: 800px;(景深)和使立方體呈3d效果展示的transform-style：preserve-3d來實現(xiàn)；

全屏的雪花飄落：用原生js來實現(xiàn)(隨機的大小，透明度的變化等)，有詳細注釋；

html5主要是實現(xiàn)背景音樂和頭部的字體卷動效果。

< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>

html部分：

css部分

js部分

是不是也想要加入HTML5的學習呢？如果你想要在短時間內(nèi)掌握HTML5 專業(yè)技術(shù)，不妨就選擇千鋒重慶HTML5培訓。千鋒重慶HTML5技術(shù)開發(fā)培訓課程采用全程面授教學，拒絕視頻同步授課，拒絕雙元視頻班教學，拒絕直播授課，教師一對一指導學員做項目，全新打造“主流技術(shù)+前沿技術(shù)+企業(yè)級聯(lián)動”教學課程，重新優(yōu)化和定義HTML5技術(shù)，采用最新版本技術(shù)開展教學，致力于為學員打造最牛的、最新的技術(shù)，助力學員拿下BAT級企業(yè)Offer。

千鋒重慶HTML5技術(shù)開發(fā)培訓，讓你在同樣的起跑線，跑出不一樣的高度。

在沒有CSS3之前，我們只能在網(wǎng)頁上實現(xiàn)2D平面動畫，但是隨著CSS3技術(shù)的普及，我們可以很方便的在網(wǎng)頁上實現(xiàn)一個3D立方體。今天給大家?guī)淼谋闶且粋€基于jQuery和CSS3的3D立方體盒子，我們可以通過鼠標拖拽瀏覽盒子的每一個面，另外，3D盒子的面都可以自定義封面圖片，你可以為每一個面選擇不同的圖片，并還可以自定義盒子的尺寸大小。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

提供源碼下載原文見。

原文地址：https://www.html5tricks.com/jquery-css3-3d-image-box.html

面這個有點萌的3D小怪物就是用H5工具（iH5.cn）做滴，而且整個H5只有100K不到。

在介紹詳細的制作教程之前，先給大家看幾個簡單的案例和應用：

.

案例一：3D畫廊

http://cee2a4eeac65.ih5.cn/idea/HaPfHJB

【適用場景】

3D的圖片排列不僅給讀者一種耳目一新的立體感，同時也使得同一個頁面能夠展示更多的內(nèi)容，適用于各種新聞內(nèi)容和視頻的展示。

.

案例二：3D微官網(wǎng)

http://cee2a4eeac65.ih5.cn/idea/0P2gVTZ

【適用場景】

用立方體構(gòu)成3D模型，可以組成3D文字或者企業(yè)logo等，非常適合用于企業(yè)品牌展示，同時組合成各種3D文字，用于表白或者節(jié)日祝福也是不錯的方式~

.

案例三：創(chuàng)意3D交互動畫

http://cee2a4eeac65.ih5.cn/idea/9bD2Uku

【適用場景】

如果H5動畫增加了一個維度會是什么感覺？試著把你以前做過的H5動畫，用3D的方式表達，你會得到一個全新的作品。

.

顛覆性的H5技術(shù)，是未來所有創(chuàng)意工作者的機遇。

雖然用H5做3D動畫不是很新鮮的事，但重點是用可視化工具就能構(gòu)建3D圖形，這是一件具備革新意義的事情。

首先，對于技術(shù)實現(xiàn)的革新：

在這之前，瀏覽器中實現(xiàn)3D構(gòu)圖和交互，是一件非常復雜的事情，要編代碼、適配環(huán)境，而且編程人員還要跟3D動畫建模師渲圖師等等溝通實現(xiàn)，效率很低，而且水平一般的前端程序員都不一定能做好。但是現(xiàn)在有了可視化的工具操作，大大提升了制作效率，并且不懂代碼的小白也可以掌握。

類似這樣簡單拖拽的操作，簡直是編程小白的福音有木有，所見即所得：

第二，對于設(shè)計創(chuàng)作的革新：

很多具備動畫基礎(chǔ)和平面基礎(chǔ)的設(shè)計師，原來苦于不懂前端編程只能畫畫平面圖，但他又不可能輕易就找個技術(shù)團隊幫他實現(xiàn)設(shè)計創(chuàng)意，但可視化H5工具的出現(xiàn)，使得設(shè)計師能不依賴技術(shù)自己創(chuàng)作基于瀏覽器的交互式3D動畫，大大拓展了設(shè)計師的發(fā)揮空間。

像下面這顆水靈靈的眼球，設(shè)計師用H5工具兩三下就搞定了，有興趣可以研究一下：

第三，對于H5商業(yè)應用的革新：

豐富的創(chuàng)作+社交分享，這是可視化工具對H5在商業(yè)領(lǐng)域應用的強力驅(qū)動。工具化不僅提高了效率，而且讓普通人也能成為H5的“開發(fā)者”，特別是大量的設(shè)計師，因為本身具備設(shè)計技能，借助不需要編程基礎(chǔ)的工具可以做出超出想象的H5應用。

現(xiàn)在H5工具能夠?qū)崿F(xiàn)3D動畫，除了大大增強了創(chuàng)作的多樣性以外，對于企業(yè)而言，H5可以有更多的應用可能性，比如說3D商品的展示，3D室內(nèi)地圖等等，由于目前手機端3D動畫的H5還比較少見，對于品牌推廣而言，也會是一個爆發(fā)點。

另外，今年如果微信推出應用號，大幅提高生產(chǎn)效率的H5工具必將給工具的早期用戶帶來巨大的紅利，大批的創(chuàng)業(yè)者可能會從工具用戶里誕生。所以大家要抓住風口，成為那只最早飛起來的...

這種三維動畫到底是怎么做出來的？

首先，你得在電腦上用谷歌瀏覽器，登錄PC端網(wǎng)站www.ih5.cn，制作過程如下：

如果你對怎么制作更感興趣的話，可以進入教程頁面進行學習（內(nèi)附試用高級賬號與密碼）：http://mp.weixin.qq.com/s?__biz=MzI0NjA2NDI2MA==&mid=402274134&idx=1&sn=288bbe91f292c6bfe435af458ee86d2f#rd

【教程目錄】

1.1 3D動畫原理——屏幕里的世界

1.2 基于Web的 3D技術(shù)簡介

1.3 制作一個可控制移動的立方體

1.4 制作一個3D微官網(wǎng)

1.5 制作一個創(chuàng)意3D動畫