推薦：html5指南-6.如何創(chuàng)建離線web應(yīng)用程序?qū)崿F(xiàn)離線訪問(wèn)
今天我們的內(nèi)容是關(guān)于如何創(chuàng)建離線web應(yīng)用，他的好處是可以讓瀏覽器下載我們指定的web資源，這樣用戶(hù)在離線狀態(tài)下也能正常使用我們的站點(diǎn)

在今天的課程中，我將向大家介紹如何使用css3創(chuàng)建3d的立方體。大家可以通過(guò)下面的鏈接瀏覽實(shí)際效果，操作上下左右鍵，實(shí)現(xiàn)立方體的翻轉(zhuǎn)效果。
demo地址：http://hl5o.cn/jiaoben/70022.html
下面我們開(kāi)始介紹如何制作。
html：

上面的html中，class為face的6個(gè)div分別代表立方體的6個(gè)面，使用one到six的class名字對(duì)他們加以區(qū)分。外部包含有id為cube和experiment的兩層容器，這兩層都是必須的，少了任何一個(gè)，3d效果都出不來(lái)。
其中experiment起到鏡頭的作用。對(duì)他設(shè)置焦距，這樣3d效果才能在內(nèi)部元素上展示出來(lái)。
perspective屬性定義z軸平面的深度，同時(shí)也定義了平面上面和下面元素的相對(duì)尺寸�？偟膩�(lái)說(shuō)，perspective值越小，物體越大，離你也越近；perspective值越大，物體越小，離你也越遠(yuǎn)。大家可以通過(guò)http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin屬性定義視角的原點(diǎn)。
css：


cube設(shè)置的屬性中包含固定的寬度和高度，并將position設(shè)置為relative。固定的高度和寬度是必須的，這樣cube中的元素才能在限定的區(qū)域內(nèi)執(zhí)行3d動(dòng)畫(huà)。如果將高度和寬度設(shè)置為100%，cube中的元素將在整個(gè)頁(yè)面范圍內(nèi)運(yùn)動(dòng)。
transition用來(lái)設(shè)置動(dòng)畫(huà)相關(guān)的屬性。transform-style: preserve-3d; 使得cube中的所有元素作為一個(gè)整體來(lái)產(chǎn)生3d效果。
大家可以瀏覽http://www.zhangxinxu.com/wordpress/2012/09/CSS3/">css3-3d-transform-perspective-animate-transition/，了解更多信息。
css：


接下來(lái)統(tǒng)一為立方體的6個(gè)面設(shè)置css屬性。
css：


接下來(lái)但是設(shè)置6個(gè)面的3d相關(guān)屬性，使用rotateX或者rotateY來(lái)實(shí)現(xiàn)立方體表面朝向的翻轉(zhuǎn)，使用translateZ實(shí)現(xiàn)立方體表面在3維空間的位置移動(dòng)。
css：


最后要做的是為頁(yè)面綁定keydown事件，這樣當(dāng)你按下上下左右鍵的時(shí)候，實(shí)現(xiàn)立方體的翻轉(zhuǎn)運(yùn)動(dòng)效果。
javascript：


課程就講到這里，接下來(lái)大家可以動(dòng)手嘗試一下。

分享：html5 Canvas畫(huà)圖教程(1)—畫(huà)圖的基本常識(shí)
Canvas，意為畫(huà)布也。而Html5中的Canvas也真的跟現(xiàn)實(shí)生活中的畫(huà)布非常相似。所以，把他看成一塊實(shí)實(shí)在在的畫(huà)布可以加快理解;如果你想學(xué)習(xí)Canvas畫(huà)圖，你必須要有Javascript基礎(chǔ),不多說(shuō)了，切入正題