Javascript中的三维图像旋转

我是Javascript新手，我想写一个可以进行3D旋转的函数。 对于二维旋转（在Z轴上），我有以下代码，但我想对上下文进行三维旋转

守则：

<img id="glass_1_orig" src="glass_1_orig.png" alt="Glass N1" width="94" height="45"/>
<canvas id="overlay" width="400" height="300"></canvas>

var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

function drawRotatedImage(x1, y1, xAngle, yAngle, zAngle, length) { 
    var glassImage = document.getElementById('glass_1_orig');
    var ratio = length/glassImage.width;

    overlayCC.save();
    overlayCC.translate(x1, y1);

    overlayCC.rotate(zAngle);
    overlayCC.drawImage(glassImage,0,0,glassImage.width,glassImage.height,-(ratio*27),-(ratio*19),length,ratio*glassImage.height);

    overlayCC.restore(); 
}

var overlay=document.getElementById（'overlay'）；
var overlayCC=overlay.getContext（'2d'）；
函数DrawRotateImage（x1，y1，xAngle，yAngle，zAngle，length）{
var glassImage=document.getElementById（'glass_1_orig'）；
var比率=长度/玻璃图像宽度；
overlycc.save（）；
叠加平移（x1，y1）；
重叠旋转（zAngle）；
OverlyCC.drawImage（glassImage，0,0，glassImage.width，glassImage.height，-（比率*27），-（比率*19），长度，比率*glassImage.height）；
overlycc.restore（）；
}

如果可能的话，您可以创建JSFIDLE演示吗？这是JSFIDLE