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

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

html5主要是實(shí)現(xiàn)背景音樂(lè)和頭部的字體卷動(dòng)效果。

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

html部分：

css部分

js部分

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

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

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

<script src="https://lf6-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

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

在介紹詳細(xì)的制作教程之前，先給大家看幾個(gè)簡(jiǎn)單的案例和應(yīng)用：

.

案例一：3D畫廊

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

【適用場(chǎng)景】

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

.

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

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

【適用場(chǎng)景】

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

.

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

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

【適用場(chǎng)景】

如果H5動(dòng)畫增加了一個(gè)維度會(huì)是什么感覺(jué)？試著把你以前做過(guò)的H5動(dòng)畫，用3D的方式表達(dá)，你會(huì)得到一個(gè)全新的作品。

.

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

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

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

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

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

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

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

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

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

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

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

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

這種三維動(dòng)畫到底是怎么做出來(lái)的？

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

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

【教程目錄】

1.1 3D動(dòng)畫原理——屏幕里的世界

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

1.3 制作一個(gè)可控制移動(dòng)的立方體

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

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