大家觉得js能够实现图片旋转的功能么

二维平面上的旋转，不是三维平面上的旋转，刚刚看了一个html5编写的页面的各种效果，灰常绚丽，有一项就是三维平面的旋转，效果很好，赶快推进html5的普及吧

解决方案 »

  1.   

    n年前就有支持全浏览器的旋转了
    以下代码支持全浏览器，且任意元素的旋转。
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    var 
    userAgent = navigator.userAgent,
    isIE = /msie/i.test(userAgent) && !window.opera,
    isWebKit = /webkit/i.test(userAgent),
    isFirefox = /firefox/i.test(userAgent);var rotate = function() {
    if (isWebKit) {
    return function(target, degree) {
    target.style.webkitTransform = "rotate(" + degree + "deg)";
    };
    } else if (isFirefox) {
    return function(target, degree) {
    target.style.MozTransform = "rotate(" + degree + "deg)";
    };
    } else if (isIE) {
    return function(target, degree) {
    degree = degree / 180 * Math.PI;
    var sinDeg = Math.sin(degree);
    var cosDeg = Math.cos(degree);

    target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +
    "M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')";
    };

    } else {
    return function(target, degree) {
    target.style.transform = "rotate(" + degree + "deg)";
    };
    }
    }();window.onload = function() {
    var console = document.getElementById("console");
    rotate(console, 30);
    }
    </script>
    </head>
    <body >
        <div id="console" style="position:absolute;left:10px; top:10px; width:400px; height:300px; border-style:solid;border-width:1px;"></div>
    </body></html>