js能实现图片变成躺平的效果么？

请教各位大神，
 用js可以把图片处理为躺平的效果么？怎么处理？
谢谢各位了

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">  
    <style type="text/css">  
    </style>  
    <SCRIPT language=JavaScript>  
    var isIE = (document.uniqueID)?1:0;
    var i=1;
    function rotate()
    {
    var object = images1.parentNode;  
    if(isIE){  
    images1.style.filter="progid:DXImageTransform.Microsoft.BasicImage( Rotation="+i+")";
    i++;
    if(i>4)
    {i=1};
    }
    else{  
    try{  
    var canvas = document.createElement('canvas');  
    if(canvas.getContext("2d")) {  
    object.replaceChild(canvas,image);  
    var context = canvas.getContext("2d");  
    context.translate(176, 0);   
    context.rotate(Math.PI*0.5);  
    context.drawImage(image,0,0);  
    }  
    }catch(e){}  
    }  
    }  
    </script>  
    </head>  
    <div><a href="#"><img src="./images/turn.gif" alt="转" width="20" height="20" style="cursor:hand" onClick="rotate();" title="右转"></a></div>  
    <div ><img src="http://avatar.profile.csdn.net/0/5/7/2_liuyujocelyn8974.jpg" id="images1"></div>
    </body>  
    </html>
    ff 可以用css3来写
    参考下
    http://dcoupe.diandian.com/post/2010-10-12/12382923