JS和CSS使图片旋转-蒲公英云

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));
}