比如可以用以下方法实现图片的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)
1、首先打开html文件编辑器，这里使用vscode新建一个html文档，文档中写入基本的html结构，然后插入img标签并插入一张图片，给img一个class属性：
2、然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可：
3、最后打开浏览器，就会看到一个图片：
4、当鼠标移动上去，图片就会自动3d旋转了：
