1、首先打开html文件编辑器，这里使用vscode新建一个html文档，文档中写入基本的html结构，然后插入img标签并插入一张图片，给img一个class属性：
2、然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可：
3、最后打开浏览器，就会看到一个图片：
4、当鼠标移动上去，图片就会自动3d旋转了：
要控制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新特性的讲解，可以去看看，希望对你有帮助。
你的js代码开始的那句oGC.translate(100,100)改变了绘图的原点，虽然你清除的图形宽高设置够；所以你clearRect清楚画布的时候只清除了一点点；正确写法oGC.clearRect(0,0,oC.width,oC.height)；你可以吧其余代码注释掉看下clearRect的图形在哪里
oGC.save()oGC.fillRect(-100,-100,oC.width,oC.height)
console.log(oC.height,oC.width)
oGC.rotate(num*Math.PI/180)
//oGC.translate(100,100)
//oGC.fillRect(0,0,100,100)
oGC.restore()
