JS和CSS使图片旋转

“秋风宝剑孤臣泪，落日旌旗大将坛”
如题,,我们要使图片可以旋转,,在图片上添加点击事件.
JSP代码:

<img class="photo1"  style="width: 350px;height: auto;max-height: 500px" id="facePhotoPath1" src="" onclick="picture_rotate(this)" onerror="notFindPicture()">

JS代码:

/** * 图片旋转 */function picture_rotate(e){    var pDiv=$("#"+e.id).attr("id");    var step=90;//每次旋转多少度    var angle=getTransformRotate(pDiv);    console.log("pid===" + pDiv);    console.log("angle===" + angle);    var pDivWidth=$("#"+e.id).parent().css("width");    var pDivHeight=$("#"+e.id).parent().css("height");    $("#"+pDiv).css({'transform':'rotate('+(step+angle)%360+'deg)'});}/** * 获取图片旋转角度 */function getTransformRotate(id){    var el = document.getElementById(id);    var st = window.getComputedStyle(el, null);    var tr = st.getPropertyValue("-webkit-transform") ||        st.getPropertyValue("-moz-transform") ||        st.getPropertyValue("-ms-transform") ||        st.getPropertyValue("-o-transform") ||        st.getPropertyValue("transform") ||        "FAIL";    // With rotate(30deg)...    // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)    // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix    var values = tr.split('(')[1].split(')')[0].split(',');    var a = values[0];    var b = values[1];    var c = values[2];    var d = values[3];    var scale = Math.sqrt(a * a + b * b);    // arc sin, convert from radians to degrees, round    var sin = b / scale;    // next line works for 30deg but not 130deg (returns 50);    // var angle = Math.round(Math.asin(sin) * (180/Math.PI));    return angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));}