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

!DOCTYPE html

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的大新網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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è)計(jì)培訓(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=""云計(jì)算培訓(xùn)/a/li

/ul

/body

/html

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

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

比如可以用以下方法實(shí)現(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)建動(dò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); // 移動(dòng)鼠標(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如何讓圖片3d旋轉(zhuǎn)？

圖片旋轉(zhuǎn)可以用CSS3中的動(dòng)畫效果來做，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

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

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

效果：

源碼：