如何實現(xiàn)HTML5中導(dǎo)航欄3d旋轉(zhuǎn)？

!DOCTYPE html

專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)黃巖免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

style

* {

padding: 0;

margin: 0;

}

ul {

width: 100%;

height: 40px;

background-color: green;

}

li {

list-style-type: none;

width: 100px;

height: 40px;

float: left;

margin-left: 40px;

}

a {

text-decoration: none;

color: black;

display: inline-block;

line-height: 40px;

text-align: center;

transition: transform 2s;

}

a:hover {

background-color: pink;

transform: rotateX(90deg);

}

/style

/head

body

ul

lia href=""UI設(shè)計培訓(xùn)/a/li

lia href=""PHP培訓(xùn)/a/li

lia href=""網(wǎng)絡(luò)營銷培訓(xùn)/a/li

lia href=""前端開發(fā)培訓(xùn)/a/li

lia href=""c++培訓(xùn)/a/li

lia href=""IOS培訓(xùn)/a/li

lia href=""Android培訓(xùn)/a/li

lia href=""云計算培訓(xùn)/a/li

/ul

/body

/html

html5怎樣引入三維模型，創(chuàng)建360度旋轉(zhuǎn)瀏覽？

html5中引入3d模型的方法是借助第三方PlayCanvas插件來完成的。

比如可以用以下方法實現(xiàn)圖片的360度旋轉(zhuǎn)：

代碼示例：

var render, loop, t, dt, //定義變量

DEG2RAD = Math.PI / 180, //角度轉(zhuǎn)弧度

cvs = document.querySelector('canvas'), //創(chuàng)建canvas

ctx = cvs.getContext('2d'),//繪制2d圖形上下文

teddy = new Image(), //創(chuàng)建圖像

heart = new Image(), //創(chuàng)建圖像中心

angle = 0,//初始化角度為0

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame;

//創(chuàng)建動畫幀

cvs.width = 400;

cvs.height = 200;

teddy.src = 'xxx.jpg';

heart.src = 'yyy.jpg';

//開始渲染

render = function (timestamp) {

dt = timestamp - t;

t = timestamp;

// cavas設(shè)置為白色

ctx.fillStyle = "rgb(255,255,255)";

ctx.fillRect(0, 0, cvs.width, cvs.height);

// 繪制中心

ctx.drawImage(heart, -20, -120);

// 繪制teddy

ctx.save();

ctx.translate(cvs.width/2, cvs.height/2); // 移動鼠標(biāo)到畫布中心

ctx.rotate(DEG2RAD * angle); // 旋轉(zhuǎn)畫布

ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // 繪制中心圖片

angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec

ctx.restore();

};

loop = function (timestamp) {

reqAnimFrame(loop);

render(timestamp);

};

t = Date.now();

loop(t);

HTML5+CSS3小實例：3D旋轉(zhuǎn)木馬相冊

HTML5+CSS3做一個3D旋轉(zhuǎn)木馬相冊，鼠標(biāo)懸停時，停止旋轉(zhuǎn)，移開繼續(xù)旋轉(zhuǎn)，大家把圖片替換成自己的即可。

效果：

源碼：

html5如何讓圖片3d旋轉(zhuǎn)？

圖片旋轉(zhuǎn)可以用CSS3中的動畫效果來做，CSS3中，允許使用 3D 轉(zhuǎn)換來對元素進(jìn)行格式化。

示例代碼如下：

style

*{margin:0;padding:0;}/*簡單可以自定義，參照上面*/

body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, System;background-color:#FFF;}

#imgg{animation:imgg 1s linear 0s infinite;}

@keyframes imgg{0% {transform:rotateY(0deg);}25%{transform:rotateY(90deg);}50%{transform:rotateY(180deg);}75%{transform:rotateY(270deg);}100% {transform:rotateY(360deg);}}

/style

div id="demo"

img src="圖片地址" alt="" width="100" height="100" id="imgg"

/div

網(wǎng)頁題目：html53d旋轉(zhuǎn),前端3d旋轉(zhuǎn)
當(dāng)前地址：http://chinadenli.net/article49/dsgioeh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、用戶體驗、域名注冊、搜索引擎優(yōu)化、云服務(wù)器、網(wǎng)站排名

廣告

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