css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)_HTML5教程
推薦:html5指南-6.如何創(chuàng)建離線web應用程序實現(xiàn)離線訪問今天我們的內容是關于如何創(chuàng)建離線web應用,他的好處是可以讓瀏覽器下載我們指定的web資源,這樣用戶在離線狀態(tài)下也能正常使用我們的站點
在今天的課程中,我將向大家介紹如何使用css3創(chuàng)建3d的立方體。大家可以通過下面的鏈接瀏覽實際效果,操作上下左右鍵,實現(xiàn)立方體的翻轉效果。
demo地址:http://m.dounai2.com/jiaoben/70022.html
下面我們開始介紹如何制作。
html:
復制代碼 代碼如下:m.dounai2.com
<div id="experiment">
<div id="cube">
<div class="face one">
One face
</div>
<div class="face two">
Up, down, left, right
</div>
<div class="face three">
Lorem ipsum.
</div>
<div class="face four">
New forms of navigation are fun.
</div>
<div class="face five">
Rotating 3D cube
</div>
<div class="face six">
More content
</div>
</div>
</div>
上面的html中,class為face的6個div分別代表立方體的6個面,使用one到six的class名字對他們加以區(qū)分。外部包含有id為cube和experiment的兩層容器,這兩層都是必須的,少了任何一個,3d效果都出不來。
其中experiment起到鏡頭的作用。對他設置焦距,這樣3d效果才能在內部元素上展示出來。
perspective屬性定義z軸平面的深度,同時也定義了平面上面和下面元素的相對尺寸。總的來說,perspective值越小,物體越大,離你也越近;perspective值越大,物體越小,離你也越遠。大家可以通過http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin屬性定義視角的原點。
css:
復制代碼 代碼如下:m.dounai2.com
#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}
cube設置的屬性中包含固定的寬度和高度,并將position設置為relative。固定的高度和寬度是必須的,這樣cube中的元素才能在限定的區(qū)域內執(zhí)行3d動畫。如果將高度和寬度設置為100%,cube中的元素將在整個頁面范圍內運動。
transition用來設置動畫相關的屬性。transform-style: preserve-3d; 使得cube中的所有元素作為一個整體來產(chǎn)生3d效果。
大家可以瀏覽http://www.zhangxinxu.com/wordpress/2012/09/CSS3/">css3-3d-transform-perspective-animate-transition/,了解更多信息。
css:
復制代碼 代碼如下:m.dounai2.com
#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
接下來統(tǒng)一為立方體的6個面設置css屬性。
css:
復制代碼 代碼如下:m.dounai2.com
.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}
接下來但是設置6個面的3d相關屬性,使用rotateX或者rotateY來實現(xiàn)立方體表面朝向的翻轉,使用translateZ實現(xiàn)立方體表面在3維空間的位置移動。
css:
復制代碼 代碼如下:m.dounai2.com
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px);
-moz-transform: rotateX(-90deg) translateZ(200px);
-o-transform: rotateX(-90deg) translateZ(200px);
transform: rotateX(-90deg) translateZ(200px);
}
最后要做的是為頁面綁定keydown事件,這樣當你按下上下左右鍵的時候,實現(xiàn)立方體的翻轉運動效果。
javascript:
復制代碼 代碼如下:m.dounai2.com
var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);
課程就講到這里,接下來大家可以動手嘗試一下。
分享:html5 Canvas畫圖教程(1)—畫圖的基本常識Canvas,意為畫布也。而Html5中的Canvas也真的跟現(xiàn)實生活中的畫布非常相似。所以,把他看成一塊實實在在的畫布可以加快理解;如果你想學習Canvas畫圖,你必須要有Javascript基礎,不多說了,切入正題
相關HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定:body的介紹
- 關于HTML5的安全問題開發(fā)人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法
- 使用CSS實現(xiàn)彈性視頻html5案例實踐
- html5指南-2.如何操作document metadata
- 使用css創(chuàng)建三角形 使用CSS3創(chuàng)建3d四面體原理及代碼(html5實踐)
- 淺談three.js中的needsUpdate的應用
- HTML5 語音搜索(淘寶店語音搜素)
- HTML5中微數(shù)據(jù)概述及在搜索引擎中的使用舉例
- html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因
- 突襲HTML5之Javascript API擴展5—其他擴展(應用緩存/服務端消息/桌面通知)
- 在IE6系列等老式瀏覽器中使用HTML5的新標簽實現(xiàn)方案
- 相關鏈接:
復制本頁鏈接| 搜索css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)
- 教程說明:
HTML5教程-css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)。