html53d旋转,前端3d旋转

如何实现HTML5中导航栏3d旋转？

!DOCTYPE html

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设计培训/a/li

lia href=""PHP培训/a/li

lia href=""网络营销培训/a/li

lia href=""前端开发培训/a/li

lia href=""c++培训/a/li

lia href=""IOS培训/a/li

lia href=""Android培训/a/li

lia href=""云计算培训/a/li

/ul

/body

/html

html5怎样引入三维模型，创建360度旋转浏览？

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

比如可以用以下方法实现图片的360度旋转：

代码示例：

var render, loop, t, dt, //定义变量

DEG2RAD = Math.PI / 180, //角度转弧度

cvs = document.querySelector('canvas'), //创建canvas

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

teddy = new Image(), //创建图像

heart = new Image(), //创建图像中心

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

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame;

//创建动画帧

cvs.width = 400;

cvs.height = 200;

teddy.src = 'xxx.jpg';

heart.src = 'yyy.jpg';

//开始渲染

render = function (timestamp) {

dt = timestamp - t;

t = timestamp;

// cavas设置为白色

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); // 移动鼠标到画布中心

ctx.rotate(DEG2RAD * angle); // 旋转画布

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旋转木马相册

HTML5+CSS3做一个3D旋转木马相册，鼠标悬停时，停止旋转，移开继续旋转，大家把图片替换成自己的即可。

效果：

源码：

html5如何让图片3d旋转？

图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。

示例代码如下：

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