HTML5如何在網(wǎng)頁中實現(xiàn)3D效果

CSS3除了為開發(fā)者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、鐘樓網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、商城系統(tǒng)網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、外貿(mào)營銷網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為鐘樓等各大城市提供網(wǎng)站開發(fā)制作服務。

三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過語法告知瀏覽器“請采用三維方式進行變形處理”，另一種方式是直接使用CSS3三維變形的語法。

觸發(fā)方法1：告知瀏覽器變形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三維變形，在移動端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書寫-webkit-的前綴內(nèi)核。

Tips：不要為body元素設置-webkit- transform-style: preserve 3d,否則會對position:fixed定位的元素造成布局影響。在開發(fā)當中，如果當前元素屬于body的子級元素，又希望應用三維變形，則在body和當前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應用三維變形即可。

觸發(fā)方法2：直接使用CSS3變形語法

!DOCTYPE?html

head

meta?charset="UTF-8"

title言成科技/title

style

.box1?{

width:?150px;

height:?150px;

border:?2px?solid?blue;

}

.box1?div?{

height:?150px;

background:?rgba(0,?0,?0,?0.5);

-webkit-transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);

transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);

}

/style

/head

body

div?class="box1"

div/div

/div

/body

/html

具體三維變形的具體屬性詳見《CSS3-3D相關知識詳解—視角以及變形方向》

3D效果制作

需求

制作一個立方體，并進行旋轉(zhuǎn)

代碼實例

!DOCTYPE?HTML

html

head

meta?charset="utf-8"?/

title言成科技/title

link?rel="stylesheet"?type="text/css"?href=""?/

style

.main-bac?{?-webkit-perspective:1500;?}?/*設定透視距離*/

.main{

width:200px;?

height:200px;?

margin:?0?auto;

position:relative;

-webkit-transform-style:preserve-3d;

-webkit-transition:-webkit-transform?2s?ease?0s;/*過渡時間*/

}

/*基本樣式*/

.main?p{

position:?absolute;?

margin:?0;?

padding:?0;?

width:?200px;?

height:?200px;??

text-align:?center;?

line-height:?200px;?

font-size:?26px;?

opacity:0.5;

}

/*將第一個元素Z軸向前移動100px，形成第一個面（正面）*/

.main?p:nth-of-type(1)?{

background-color:red;

-webkit-transform:translateZ(100px);

}

/*將第一個元素Z軸向前移動100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/

.main?p:nth-of-type(2)?{

background-color:orange;?

-webkit-transform:rotateX(90deg)?translateZ(100px);

}

/*將第一個元素Z軸向前移動100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/

.main?p:nth-of-type(3)?{

background-color:yellow;

-webkit-transform:rotateX(-90deg)?translateZ(100px);

}

/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/

.main?p:nth-of-type(4)?{

background-color:green;

-webkit-transform:rotateY(90deg)?translateZ(100px);

}

/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/

.main?p:nth-of-type(5)?{

background-color:#b435bf;

-webkit-transform:rotateY(-90deg)?translateZ(100px);

}

/*將第一個元素Z軸向前移動100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/

.main?p:nth-of-type(6)?{

background-color:blue;

-webkit-transform:rotateY(180deg)?translateZ(100px);

}

/*鼠標移入時繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/

.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???

/style

/head

body

div?class="main-bac"

div?class="main"

p言成科技/p

p3D立方體/p

pHTML5學堂/p

p3D立方體/p

p碼匠/p

pJavaScript/p

/div??????????????

/div

/body

/html

代碼解析

當鼠標移入的時候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時，圍繞Y軸旋轉(zhuǎn)45度。

當鼠標移出立方體時，立方體恢復到初始狀態(tài)。在最開始狀態(tài)時，并沒有采用無限遠的視角，設置一定的視角，讓剛開始時直視立方體時，不會覺得是一個平面。

3D效果制作-目標效果圖

以上資料來源：《HTML5布局之路》

HTML5中如何實現(xiàn)這種效果？

可以使用js的scrollTop 屬性來監(jiān)聽滾動的距離，然后修改左邊導航的樣式來實現(xiàn)

推薦8款HTML5相關的特殊效果 看看都能夠?qū)崿F(xiàn)哪些功能

HTML5是HTML的升級版，HTML5有兩大特點：首先，強化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web

應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術組合。今天我們推薦8款使用HTML5生成的特

殊效果，希望可以對大家的使用帶來幫助!

HTML5實現(xiàn)的五子棋游戲

在線演示

這是一款使用HTML5實現(xiàn)的五子棋特效，與計算機的對局你不見得能次次都贏得勝利，不信可以點擊在線演示。

一款不需要視頻文件的視頻播放器-Frame player

在線演示

HTML5視頻是非常棒的，它可以很容易的用在多款設備上。但是它也有自己的問題，比如移動設備的播放器，可能有不同版本不兼容的情況。今天我們介紹這款視頻播放器完善了之前的效果，用起來更方便。希望大家喜歡!

3D菜單

在線演示

或許在現(xiàn)如今這個科技發(fā)達的時代，在線點餐已不是新鮮事。餐廳可以對Menu進行設計，點擊菜名會相應彈出菜品的照片，或者還可以增加卡路里，原材料和客戶們的評價等。絕對是一個超時髦的創(chuàng)意!

用HTML5的畫布實現(xiàn)撕布的動畫效果

在線演示

用HTML5的畫布實現(xiàn)撕布的效果，滑動鼠標，布會隨著鼠標變動。點擊鼠標左鍵，然后滑動鼠標，布就會被割開。如果你還沒有查看過這款演示效果，那絕對逼真的讓你震撼!

HTML5 Canvas(畫布) 基礎使用和介紹

在線下載

還記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關圖形的話，使用Flash可能是你唯一或者說最強大的實現(xiàn)方式，而在近些年的技術

熱點HTML5標準中，HTML

Canvas(畫布)能夠更加方便的幫助你實現(xiàn)2D繪制圖形圖像及其各種動畫效果功能。在今天的這篇技術教程中我們將介紹基本的Canvas使用，希望大

家覺得有幫助!

HTML5畫布生成的2D光源效果

在線演示

超金屬的背景，仿佛探照燈的經(jīng)過讓他看上去更加的立體。這是一款使用HTML5 Canvas生成的2D光源效果。絕對讓你不后悔使用它!

HTML5的Flappy bird實現(xiàn)

在線演示

著名的Flappy Bird，相信知道的人一定不少吧，點擊你的空格，不要讓它掉下來，看看你最終的成績有多好。發(fā)上來我們切磋一下吧.

Sonic - 循環(huán)加載的利器

在線演示1 在線演示2 在線演示3

Sonic是一個不到3k，非常小的JS類庫，你可以用這個類庫來創(chuàng)建自定義的加載動畫。它的循環(huán)動畫效果非常贊，比如你可以用它做一條不斷追

逐自己尾巴

的蛇，這樣的動畫。Sonic使用了HTML5的canvas元素和其相關API。它基于在一定小的時間間隔上，基于預定義的路徑，畫出下一個形狀，從而

完成動畫效果。你可以使用arc，bezier，或line的方法來定義路徑。

怎么用html5實現(xiàn) 抽獎效果

這個需要用到H5新標簽：canvas繪制圖形，利用js來實現(xiàn)抽獎效果，實現(xiàn)步驟如下：

var num = 6; // 獎品數(shù)量 var canvas = document.getElementById('canvas'); var

btn = document.getElementById('btn'); if(!canvas.getContext){

alert('抱歉！瀏覽器不支持。'); return; } // 獲取繪圖上下文 var ctx = canvas.getContext('2d'); for

(var i = 1; i = num; i++) { // 保存當前狀態(tài) ctx.save(); // 開始一條新路徑

ctx.beginPath(); // 位移到圓心，下面需要圍繞圓心旋轉(zhuǎn) ctx.translate(150, 150); // 從(0,

0)坐標開始定義一條新的子路徑 ctx.moveTo(0, 0); // 旋轉(zhuǎn)弧度,需將角度轉(zhuǎn)換為弧度,使用 degrees * Math.PI/180

公式進行計算。 ctx.rotate(360 / num * i * Math.PI/180); // 繪制圓弧 ctx.arc(0, 0, 150, 0, 2

* Math.PI / num, false); if (i % 2 == 0) { ctx.fillStyle = '#ffb820'; }else{

ctx.fillStyle = '#ffcb3f'; } // 填充扇形 ctx.fill(); // 繪制邊框 ctx.lineWidth = 0.5;

ctx.strokeStyle = '#f48d24'; ctx.stroke(); // 恢復前一個狀態(tài) ctx.restore(); }

HTML5用canvas怎么實現(xiàn)動畫效果

使用HTML5畫布canvas能夠快速實現(xiàn)簡單的動畫效果，基本原理如下：

每隔一定時間繪制圖形并且清除圖形，用來模擬出一個動畫過程，可以使用context.clearRect(0, 0, x, y)方法來刷新需要繪制的圖形

首先是繪制圖形的方法，如下：

function?myAnimation()?{

ctx.clearRect(0,?0,?canvas_size_x,?canvas_size_y);

if?(x_icon??0?||?x_icon??canvas_size_x?-?size_x)?{

stepX?=?-stepX;

}

if?(y_icon??0?||?y_icon??canvas_size_y?-?size_y)?{

stepY?=?-stepY;

}

x_icon?+=?stepX;

y_icon?+=?stepY;

ctx.drawImage(anim_img,?x_icon,?y_icon);

}

以上方法每隔一定時間清除畫布內(nèi)容，并且重新計算繪制圖形位置，一旦超過了畫布大小，則反轉(zhuǎn)坐標繪制圖形。

名稱欄目：包含html5實現(xiàn)效果的詞條
當前路徑：http://chinadenli.net/article24/dsidpje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、用戶體驗、網(wǎng)站改版、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)