html5怎样做出图片转圈的动画效果

可以使用css3中的rotate实现

成都创新互联公司专注于企业全网营销推广、网站重做改版、富川网站定制设计、自适应品牌网站建设、H5页面制作、商城网站制作、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为富川等各大城市提供网站开发制作服务。

实际的旋转效果是这样：

rotate中的 60deg 表示按最原始的位置，顺时针旋转60°

w3school 里面有更详细用法，可以2D旋转、3D旋转

可以参考：网页链接

动画效果可以通过js改变rotate中传入的值来实现

html5如何让图片3d旋转

1、首先打开html文件编辑器，这里使用vscode新建一个html文档，文档中写入基本的html结构，然后插入img标签并插入一张图片，给img一个class属性：

2、然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可：

3、最后打开浏览器，就会看到一个图片：

4、当鼠标移动上去，图片就会自动3d旋转了：

怎样用HTML5制作旋转时钟

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

title无标题文档/title

style

#box{width:206px;height:206px; margin:80px auto; position:relative;}

#dial{height:200px;border:3px solid #000; border-radius:103px; position:relative;}

#box span{ width:2px;height:6px;background:#666; position:absolute;left:99px;top:0;-webkit-transform-origin:0 100px;}

#hand{ width:12px;height:12px; position:absolute;left:97px;top:97px;}

#hour{ width:4px; height:45px;background:#000; position:absolute;left:4px;bottom:6px; -webkit-transform-origin:bottom;}

#min{width:2px;height:60px;background:#666; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}

#sec{width:2px;height:75px;background:red; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}

#centre{height:12px;border-radius:9px;background:#000; position:relative;}

#dial span:nth-of-type(5n+1){height:10px;background:#000;}

/style

script

window.onload=function()

{

var oDial=document.getElementById("dial");

var oHour=document.getElementById("hour");

var oMin=document.getElementById("min");

var oSec=document.getElementById("sec");

toDial(oDial);

toTime(oHour,oMin,oSec);

setInterval(function(){

toTime(oHour,oMin,oSec);

},1000)

};

function toTime(oHour,oMin,oSec)

{

var oDate=new Date();

var iSec=oDate.getSeconds();

var iMin=oDate.getMinutes()+iSec/60;

var iHour=(oDate.getHours()%12)+iMin/60;

oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";

oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";

oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";

}

function toDial(obj)

{

var sHtml="";

var iDeg=6;

for(var i=0;i60;i++)

{

sHtml+="span style='-webkit-transform:rotate("+iDeg*i+"deg)'/span"

}

obj.innerHTML=sHtml;

}

/script

/head

body

div id="box"

div id="dial"

/div

div id="hand"

div id="hour"/div

div id="min"/div

div id="sec"/div

div id="centre"/div

/div

/div

/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中，如何控制canvas旋转图片？

要控制canvas旋转图片需要用到HTML5中canvas的rotate方法。我们通过一个具体的示例进行分析。

!DOCTYPE html

html

head

meta charset="utf-8"

title图片旋转/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//1、 获取到画布对象以及画布的上下文对象

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

//2、 在画布上进行图片绘制

var img = new Image();

img.src = 'fist-pump-baby.jpg';//这里是绘制图片的路径

img.onload = function() {

context.drawImage(img, 0, 0);

}

//3、 设置画布旋转

context.rotate(0.2);//通过rotate方法以弧度为参数旋转图像

//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。

//context.rotate(degreesToRadians(-15));

}

/script

script src="jquery.js"/script

/body

/html

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。

当前文章：html5旋转,html5旋转相册
转载来于：http://kswjz.com/article/dssogsd.html